Typescript ile bir nesne dizisi için bir arabirimi nasıl tanımlayabilirim?

Aşağıdaki arayüz ve koda sahibim. Tanımları doğru yaptığımı sanıyordum ama bir hata alıyorum:

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

ve:

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

Hata:

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

Bir indeksleyici ile bir arayüz tanımlayabilirsiniz :

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

Bir dizin oluşturucu kullanmanıza gerek yoktur (çünkü biraz daha az tür güvenlidir). İki seçeneğiniz var:

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

Kişisel olarak, Seçenek A'yı tavsiye ederim (arayüzleri değil sınıfları kullandığınızda daha basit geçiş).

Array arayüzünü basitçe genişleterek bir arayüzü dizi olarak tanımlayabilirsiniz.

export interface MyInterface extends Array<MyType> { }

Bununla, uygulayan herhangi bir nesne MyInterface, dizilerin tüm işlev çağrılarını gerçekleştirmeye ihtiyaç duyacak ve yalnızca MyTypetürdeki nesneleri depolayabilecektir .

Ek kolay seçenek:

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

    type simpleType = simpleInt[];

Kullanmayın

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

Tüm Arrays özellikleri ve splice vb. Yöntemler için hatalar alacaksınız.

Çözüm, başka bir arabirim dizisini tanımlayan (nesneyi tanımlayacak) bir arabirim oluşturmaktır.

Örneğin:

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

Açısal kullanımda, nesnelerin bir 'Dizisi' için arabirimi tanımlamak için 'genişler'.

Bir dizin oluşturucu kullanmak, bir Array arayüzü olmadığından, özellikleri ve yöntemleri içermediğinden size bir hata verecektir.

Örneğin

hatası TS2339: 'bul' özelliği 'ISelectOptions2' türünde mevcut değil.

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

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

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

Bunu da yapabilirsiniz.

            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 hatası olmayan kolay seçenek ...

export interface MyItem {
    id: number
    name: string
}

export type MyItemList = [MyItem]

Tamamen yeni bir tür oluşturmak istemiyorsanız, işte bir satır içi sürüm:

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

Programlama basittir. Basit kullanım alanı kullanın:

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

İşte örneğinize uyarlanmış bir çözüm:

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

interface IenumServiceGetOrderBy extends Array<IenumServiceGetOrderByAttributes> {

}

let result: IenumServiceGetOrderBy;

Bu çözümle, Dizinin tüm özelliklerini ve yöntemlerini kullanabilirsiniz (örneğin: length, push(), pop(), splice()...)