ChatGPT解决这个技术问题 Extra ChatGPT

如何为对象数组定义接口?

我有以下界面和代码。我以为我在做正确的定义,但我收到一个错误:

interface IenumServiceGetOrderBy { id: number; label: string; key: any }[];

和:

getOrderBy = (entity): IenumServiceGetOrderBy => {
        var result: IenumServiceGetOrderBy;
        switch (entity) {
            case "content":
                result =
                [
                    { id: 0, label: 'CId', key: 'contentId' },
                    { id: 1, label: 'Modified By', key: 'modifiedBy' },
                    { id: 2, label: 'Modified Date', key: 'modified' },
                    { id: 3, label: 'Status', key: 'contentStatusId' },
                    { id: 4, label: 'Status > Type', key: ['contentStatusId', 'contentTypeId'] },
                    { id: 5, label: 'Title', key: 'title' },
                    { id: 6, label: 'Type', key: 'contentTypeId' },
                    { id: 7, label: 'Type > Status', key: ['contentTypeId', 'contentStatusId'] }
                ];
                break;
        }
        return result;
    };

错误:

Error   190 Cannot convert '{}[]' to 'IenumServiceGetOrderBy':
    Type '{}[]' is missing property 'id' from type 'IenumServiceGetOrderBy'

b
basarat

您不需要使用索引器(因为它的类型安全性稍差)。你有两个选择:

interface EnumServiceItem {
    id: number; label: string; key: any
}

interface EnumServiceItems extends Array<EnumServiceItem>{}


// Option A 
var result: EnumServiceItem[] = [
    { id: 0, label: 'CId', key: 'contentId' },
    { id: 1, label: 'Modified By', key: 'modifiedBy' },
    { id: 2, label: 'Modified Date', key: 'modified' },
    { id: 3, label: 'Status', key: 'contentStatusId' },
    { id: 4, label: 'Status > Type', key: ['contentStatusId', 'contentTypeId'] },
    { id: 5, label: 'Title', key: 'title' },
    { id: 6, label: 'Type', key: 'contentTypeId' },
    { id: 7, label: 'Type > Status', key: ['contentTypeId', 'contentStatusId'] }
];

// Option B
var result: EnumServiceItems = [
    { id: 0, label: 'CId', key: 'contentId' },
    { id: 1, label: 'Modified By', key: 'modifiedBy' },
    { id: 2, label: 'Modified Date', key: 'modified' },
    { id: 3, label: 'Status', key: 'contentStatusId' },
    { id: 4, label: 'Status > Type', key: ['contentStatusId', 'contentTypeId'] },
    { id: 5, label: 'Title', key: 'title' },
    { id: 6, label: 'Type', key: 'contentTypeId' },
    { id: 7, label: 'Type > Status', key: ['contentTypeId', 'contentStatusId'] }
]

我个人推荐选项 A(使用类而不是接口时迁移更简单)。


? 添加到接口中的所有声明中,例如。 id?: number; label?: string; key?: any 如果您使用 less 属性而不是接口中定义的属性,那么避免转换问题的最佳方法是什么? IE。我可能不会在类型化数组设置中指定 key
选项 B 很有用,因为它允许您在编写更高级别的接口时使用该接口。
天哪,这让我困扰了这么久,谢谢!
第二个接口声明给出以下 tslint 错误:“声明没有成员的接口等同于其超类型”
我可以建议'key'是字符串类型吗?字符串 [] 而不是任何。像这样:interface EnumServiceItem { id: number; label: string; key: string | string[] }
D
Dane Brouwer

您可以使用 indexer 定义接口:

interface EnumServiceGetOrderBy {
    [index: number]: { id: number; label: string; key: any };
}

不是真正的“使用 Typescript 的对象数组的接口”
是的,您仅为特定项目定义接口的示例将是一种更有用的方法。拥有一系列项目但又不想方便地引用单个项目的情况非常罕见。使用真正的数组也会在接口上暴露 .length,这可能会经常使用。
如何定义类来实现这个接口?
此解决方案的问题在于这不是 Array 接口,因此所有 Array 属性和方法(例如 lengthpush)都将丢失。
有了这个,您在使用数组函数时会出错,请参阅这个 - stackoverflow.com/q/50215823/9640177
N
NoNameProvided

您可以通过简单地扩展 Array 接口将接口定义为数组。

export interface MyInterface extends Array<MyType> { }

这样,任何实现 MyInterface 的对象都需要实现数组的所有函数调用,并且只能存储 MyType 类型的对象。


美丽的解决方案。这应该是公认的答案。
为什么不使用类型 (type MyTypeArray = Array<MyType>) 而不是扩展接口?
OP 要求提供接口,我假设它是用其他属性和方法扩展的,你不能用类型来做到这一点,而且在一般可用性方面,类型比接口更受限制
我看着这个,我希望在这个例子中也定义了 MyType。我几乎可以使用这个答案,当然,除了我卡住了,因为我不知道 MyType 应该是什么样子。是否可以用它来更新答案?
最好的解决方案应该是公认的答案
D
Dane Brouwer

额外的简单选项:

    interface simpleInt {
        id: number;
        label: string;
        key: any;
    }

    type simpleType = simpleInt[];

非常好,简单,优雅。
好兄弟
J
Jeremy Levett

不使用

interface EnumServiceGetOrderBy {
    [index: number]: { id: number; label: string; key: any };
}

您将收到所有 Arrays 属性和方法(例如 splice 等)的错误。

解决方案是创建一个接口,该接口定义另一个接口的数组(它将定义对象)

例如:

interface TopCategoriesProps {
  data: Array<Type>;
}
interface Type {
  category: string;
  percentage: number;
}

E
Ericgit

像这样使用!

interface Iinput {
  label: string
  placeholder: string
  register: any
  type?: string
  required: boolean
}


// This is how it can be done

const inputs: Array<Iinput> = [
  {
    label: "Title",
    placeholder: "Bought something",
    register: register,
    required: true,
  },
]

G
Graham Mills

在 Angular 中,使用“扩展”来定义对象“数组”的接口。

使用索引器会给您一个错误,因为它不是 Array 接口,因此不包含属性和方法。

例如

错误 TS2339:类型 'ISelectOptions2' 上不存在属性 'find'。

// good    
export interface ISelectOptions1 extends Array<ISelectOption> {}

// bad
export interface ISelectOptions2 {
    [index: number]: ISelectOption;
}

interface ISelectOption {
    prop1: string;
    prop2?: boolean;
}

如果 linter 不允许空接口,则此方法将导致“声明没有成员的接口等同于其超类型”。
这个答案非常接近它帮助我解决了我的问题!对于要在另一个接口中为其创建数组的初始对象,键入“interface ISelectOptions { name1 : type; name2: type; } 然后在 BIG 接口中,当你到达想要成为数组的键时那个类型,keyZ: ISelectOptions[]; 然后当你创建 JSON 时,myVar : BIG = {key1: val1, key2: val2, ..., keyZ: [{name1 : valA, name2: valB}, {name1 : valC, name2 : valD}] 像冠军一样工作!(虽然不需要扩展 Array 类)谢谢!
C
CiriousJoker

如果您不想创建全新的类型,这是一个内联版本:

export interface ISomeInterface extends Array<{
    [someindex: string]: number;
}> { };

我喜欢这个选项。
E
Euan Millar

没有 tslint 错误的简单选项...

export interface MyItem {
    id: number
    name: string
}

export type MyItemList = [MyItem]

导出的 MyItemList 类型将是“MyItem 的单元素数组”
可能是export type MyItemList = MyItem[]? IMO 接口和类型别名的组合最适合这种情况,因为您的类型别名中包含 Array 类型的所有方法
这不是数组而是元组!!
R
Rolly

你也可以这样做。

            interface IenumServiceGetOrderBy {
                id: number; 
                label: string; 
                key: any;
            }

            // notice i am not using the []
            var oneResult: IenumServiceGetOrderBy = { id: 0, label: 'CId', key: 'contentId'};

            //notice i am using []
            // it is read like "array of IenumServiceGetOrderBy"
            var ArrayOfResult: IenumServiceGetOrderBy[] = 
            [
                { id: 0, label: 'CId', key: 'contentId' },
                { id: 1, label: 'Modified By', key: 'modifiedBy' },
                { id: 2, label: 'Modified Date', key: 'modified' },
                { id: 3, label: 'Status', key: 'contentStatusId' },
                { id: 4, label: 'Status > Type', key: ['contentStatusId', 'contentTypeId'] },
                { id: 5, label: 'Title', key: 'title' },
                { id: 6, label: 'Type', key: 'contentTypeId' },
                { id: 7, label: 'Type > Status', key: ['contentTypeId', 'contentStatusId'] }
            ];

J
JsonKody

所以我会加两分钱:)

假设您想要一个包含 PersonWorkplace 类型。你需要这样的东西:

错误的! ...作为接口


interface Workplace {
   name: string
   age: number
}[] 
// that [] doesn't work!! ;)

这里的问题是接口用于指定类/对象形状..仅此而已。所以你可以使用 type 而不是 witch 更灵活

更好 -> 使用类型而不是接口


type Workplace = {
   name: string
   age: number
}[] 

// This works :D

但也许最好的是...

使用接口定义内部对象 Person,然后将 Workplace 定义为由人员数组创建的类型 -> Person[]


interface Person {
   name: string
   age: number
}

type Workplace = Person[]

// nice ;)

祝你好运


R
Rahmat Ali

编程很简单。使用简单的用例:

interface IenumServiceGetOrderBy { id: number; label: string; key: any }
 // OR
interface IenumServiceGetOrderBy { id: number; label: string; key: string | string[] }

// use interface like
const result: IenumServiceGetOrderBy[] = 
                [
                    { id: 0, label: 'CId', key: 'contentId' },
                    { id: 1, label: 'Modified By', key: 'modifiedBy' },
                    { id: 4, label: 'Status > Type', key: ['contentStatusId', 'contentTypeId'] }
                ];



A
Amel

这是适合您的示例的一种解决方案:

interface IenumServiceGetOrderByAttributes { 
  id: number; 
  label: string; 
  key: any 
}

interface IenumServiceGetOrderBy extends Array<IenumServiceGetOrderByAttributes> {

}

let result: IenumServiceGetOrderBy;

使用此解决方案,您可以使用 Array 的所有属性和方法(例如:length, push(), pop(), splice() ...)


W
Wilman Sirit

我会使用以下结构:

interface arrayOfObjects extends Array<{}> {}

然后更容易定义:

let myArrayOfObjects: arrayOfObjects = [
  { id: 0, label: "CId", key: "contentId" },
  { id: 1, label: "Modified By", key: "modifiedBy" },
  { id: 2, label: "Modified Date", key: "modified" },
  { id: 3, label: "Status", key: "contentStatusId" },
  { id: 4, label: "Status > Type", key: ["contentStatusId", "contentTypeId"] },
  { id: 5, label: "Title", key: "title" },
  { id: 6, label: "Type", key: "contentTypeId" },
  { id: 7, label: "Type > Status", key: ["contentTypeId", "contentStatusId"] },
];

J
Jakub Kurdziel

您可以通过简单地扩展接口将类型定义为对象数组。下面是一个例子:

// type of each item in the Service list
interface EnumServiceItem {
    id: string;
    label: string;
}

// type of the Service 
interface ServiceType {
    id: string,
    label: string,
    childList?: Array<EnumServiceItem>
}

// type of the Service list
type ServiceListType = Array<ServiceType>

let draggableList:ServiceListType =  [
        {
            id: "1",
            label: 'Parent Item 1',
            childList: [
                {
                    id: "11",
                    label: 'Child Item 1',
                },
                {
                    id: "12",
                    label: 'Child Item 2',
                }
                ,
                {
                    id: "13",
                    label: 'Child Item 3',
                }
            ]
        },
        {
            id: "2",
            label: 'Parent Item 2',
            childList: [
                {
                    id: "14",
                    label: 'Child Item 4',
                },
                {
                    id: "15",
                    label: 'Child Item 5',
                }
                ,
                {
                    id: "16",
                    label: 'Child Item 6',
                }
            ]
        },
        {
            id: "3",
            label: 'Parent Item 3',
            childList: [
                {
                    id: "17",
                    label: 'Child Item 7',
                },
                {
                    id: "18",
                    label: 'Child Item 8',
                }
                ,
                {
                    id: "19",
                    label: 'Child Item 9',
                }
            ]
        },

    ]