Jak mogę zdefiniować interfejs dla tablicy obiektów za pomocą Typescript?

Mam następujący interfejs i kod. Myślałem, że definicje robię poprawnie, ale pojawia się błąd:

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

i:

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

Błąd:

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

Możesz zdefiniować interfejs z indeksatorem :

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

Nie musisz używać indeksatora (ponieważ jest on nieco mniej bezpieczny). Masz dwie możliwości:

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

Osobiście polecam opcję A (prostsza migracja, gdy używasz klas, a nie interfejsów).

Możesz zdefiniować interfejs jako tablicę, po prostu rozszerzając interfejs Array.

export interface MyInterface extends Array<MyType> { }

Dzięki temu każdy obiekt, który implementuje, MyInterfacebędzie musiał zaimplementować wszystkie wywołania funkcji tablic i będzie mógł przechowywać tylko obiekty tego MyTypetypu.

Dodatkowa łatwa opcja:

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

    type simpleType = simpleInt[];

Nie używać

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

Otrzymasz błędy dla wszystkich właściwości i metod Arrays, takich jak łączenie itp.

Rozwiązaniem jest stworzenie interfejsu, który definiuje tablicę innego interfejsu (który będzie definiował obiekt)

Na przykład:

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

W Angular użyj „extends”, aby zdefiniować interfejs dla „Array” obiektów.

Użycie indeksatora spowoduje błąd, ponieważ nie jest to interfejs typu Array, więc nie zawiera właściwości i metod.

na przykład

błąd TS2339: Właściwość „find” nie istnieje w typie „ISelectOptions2”.

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

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

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

Ty też możesz to zrobić.

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

Łatwa opcja bez błędów tslint ...

export interface MyItem {
    id: number
    name: string
}

export type MyItemList = [MyItem]

Oto wersja wbudowana, jeśli nie chcesz tworzyć zupełnie nowego typu:

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

Programowanie jest proste. Użyj prostego przypadku:

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