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

时间:2014-08-24 06:53:31

标签: typescript

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

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'

12 个答案:

答案 0 :(得分:138)

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

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(当你使用类而不是接口时更简单的迁移)。

答案 1 :(得分:57)

您可以使用indexer定义界面:

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

答案 2 :(得分:45)

您只需扩展Array接口即可将接口定义为数组。

export interface MyInterface extends Array<MyType> { }

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

答案 3 :(得分:9)

请勿使用

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

对于所有Arrays属性和方法(例如拼接等),您将得到错误。

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

例如:

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

答案 4 :(得分:4)

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

export interface MyItem {
    id: number
    name: string
}

export type MyItemList = [MyItem]

答案 5 :(得分:4)

像这样使用!

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,
  },
]

答案 6 :(得分:1)

如果您不想创建全新的类型,则为嵌入式版本:

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

答案 7 :(得分:1)

您也可以这样做。

            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'] }
            ];

答案 8 :(得分:1)

其他简单选项:

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

type simpleType = simpleInt[];

答案 9 :(得分:1)

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

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

例如

  

错误TS2339:类型“ ISelectOptions2”上不存在属性“查找”。

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

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

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

答案 10 :(得分:1)

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

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'] }
                ];


答案 11 :(得分:1)

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

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

interface IenumServiceGetOrderBy extends Array<IenumServiceGetOrderByAttributes> {

}

let result: IenumServiceGetOrderBy;

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