Làm cách nào để tôi có thể xác định giao diện cho một mảng đối tượng với Typecript?

Tôi có giao diện và mã sau đây. Tôi nghĩ rằng tôi đã làm đúng các định nghĩa nhưng tôi gặp lỗi:

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

và:

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

Lỗi:

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

Bạn có thể xác định giao diện bằng trình chỉ mục :

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

Bạn không cần sử dụng trình chỉ mục (vì nó ít an toàn hơn một chút). Bạn có hai lựa chọn:

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

Cá nhân tôi đề xuất Tùy chọn A (di chuyển đơn giản hơn khi bạn đang sử dụng các lớp không phải giao diện).

Bạn có thể xác định một giao diện dưới dạng mảng chỉ cần mở rộng giao diện Mảng.

export interface MyInterface extends Array<MyType> { }

Với điều này, bất kỳ đối tượng nào thực hiện MyInterfaceý muốn cần thực hiện tất cả các lệnh gọi hàm của mảng và chỉ có thể lưu trữ các đối tượng có MyTypekiểu.

Tùy chọn bổ sung dễ dàng:

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

    type simpleType = simpleInt[];

Không được dùng

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

Bạn sẽ gặp lỗi đối với tất cả các thuộc tính và phương thức của Mảng chẳng hạn như mối nối, v.v.

Giải pháp là tạo một giao diện xác định một mảng của giao diện khác (sẽ xác định đối tượng)

Ví dụ:

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

Trong Angular sử dụng 'mở rộng' để xác định giao diện cho 'Mảng' của các đối tượng.

Việc sử dụng một trình chỉ mục sẽ mang lại cho bạn một lỗi vì nó không phải là một giao diện Mảng nên không chứa các thuộc tính và phương thức.

ví dụ

lỗi TS2339: Thuộc tính 'find' không tồn tại trên loại 'ISelectOptions2'.

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

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

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

Ngoài ra bạn có thể làm điều này.

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

Tùy chọn dễ dàng không có lỗi tslint ...

export interface MyItem {
    id: number
    name: string
}

export type MyItemList = [MyItem]

Đây là phiên bản nội tuyến nếu bạn không muốn tạo một kiểu hoàn toàn mới:

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

Lập trình rất đơn giản. Sử dụng usecase đơn giả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'] }
                ];