Як я можу визначити інтерфейс для масиву об’єктів з 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'

Ви можете визначити інтерфейс з індексатором :

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

Не потрібно використовувати індексатор (оскільки це трохи менше typesafe). У вас є два варіанти:

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

Особисто я рекомендую Варіант А (простіша міграція, коли Ви використовуєте класи, а не інтерфейси).

Ви можете визначити інтерфейс як масив, просто розширивши інтерфейс Array.

export interface MyInterface extends Array<MyType> { }

При цьому будь-який об’єкт, який реалізує MyInterfaceзаповіт, повинен реалізувати всі виклики функцій масивів і лише зможе зберігати об'єкти з MyTypeтипом.

Додатковий простий варіант:

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

    type simpleType = simpleInt[];

Не використовувати

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

Ви отримаєте помилки для всіх властивостей і методів масивів, таких як зрощення тощо.

Рішення полягає у створенні інтерфейсу, який визначає масив іншого інтерфейсу (який визначатиме об’єкт)

Наприклад:

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

У кутовому використанні "розширюється" для визначення інтерфейсу для "масиву" об'єктів.

Використання індексатора дасть вам помилку, оскільки його інтерфейс не масив, тому не містить властивостей та методів.

напр

помилка TS2339: властивість 'find' не існує для типу 'ISelectOptions2'.

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

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

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

Також ви можете це зробити.

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

Простий варіант без помилок tslint ...

export interface MyItem {
    id: number
    name: string
}

export type MyItemList = [MyItem]

Ось вбудована версія, якщо ви не хочете створювати абсолютно новий тип:

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

Програмування просте. Використовуйте просту футляр:

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