오브젝트 배열의 인터페이스를 정의하려면 어떻게 해야 합니까?

오브젝트 배열의 인터페이스를 정의하려면 어떻게 해야 합니까?

다음과 같은 인터페이스와 코드를 가지고 있습니다.정의를 올바르게 수행하고 있다고 생각했는데 오류가 발생했습니다.

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 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(인터페이스가 아닌 클래스를 사용하는 경우의 심플한 이행)를 추천합니다.

인덱서를 사용하여 인터페이스를 정의할 수 있습니다.

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

어레이 인터페이스를 확장하기만 하면 인터페이스를 어레이로 정의할 수 있습니다.

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

이렇게 써!

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

그래서 제 의견을 덧붙이겠습니다.

예를 들어, 당신이 원하는 것은Workplace을 가득 타이핑하다Persons. 다음과 같은 것이 필요합니다.

틀렸어! ...인터페이스로

interface Workplace {
   name: string
   age: number
}[] 
// that [] doesn't work!! ;)

여기서의 문제는 인터페이스가 클래스/오브젝트 쉐이프를 지정하기 위한 것이라는 것입니다.그 이상도 이하도 아니다그럼 다음 명령을 사용할 수 있습니다.type대신 마녀는 훨씬 더 유연하다.

더 나은 사용법type대신interface

type Workplace = {
   name: string
   age: number
}[] 

// This works :D

하지만 어쩌면 가장 좋은 건...

내부 객체를 정의하다Person와 함께interface그리고 나서.Workplace~하듯이type-> 여러 명이서 제작했습니다.Person[]

interface Person {
   name: string
   age: number
}

type Workplace = Person[]

// nice ;)

행운을 빌어요

Angular에서 '확장'을 사용하여 개체의 '배열'에 대한 인터페이스를 정의합니다.

인덱서를 사용하면 어레이 인터페이스가 아니므로 속성 및 메서드가 포함되어 있지 않으므로 오류가 발생합니다.

예

오류 TS2339: 유형 '찾기' 속성이 없습니다.ISelect Options 2'를 선택합니다.

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

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

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

완전히 새로운 타입을 작성하지 않는 경우는, 다음의 인라인 버전을 참조해 주세요.

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

tslint 오류가 없는 쉬운 옵션...

export interface MyItem {
    id: number
    name: string
}

export type MyItemList = [MyItem]

이것도 할 수 있어요.

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

프로그래밍은 간단합니다.간단한 사용 예:

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

다음은 예에 맞게 조정된 한 가지 솔루션입니다.

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

interface IenumServiceGetOrderBy extends Array<IenumServiceGetOrderByAttributes> {

}

let result: IenumServiceGetOrderBy;

이 솔루션에서는 다음과 같은 어레이의 모든 속성 및 방법을 사용할 수 있습니다.length, push(), pop(), splice()...)

다음과 같은 구조를 사용합니다.

interface arrayOfObjects extends Array<{}> {}

그 후, 보다 간단하게 정의할 수 있습니다.

let myArrayOfObjects: arrayOfObjects = [
  { 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"] },
];

인터페이스를 확장하는 것만으로 유형을 오브젝트 배열로 정의할 수 있습니다.다음은 예를 제시하겠습니다.

// type of each item in the Service list
interface EnumServiceItem {
    id: string;
    label: string;
}

// type of the Service 
interface ServiceType {
    id: string,
    label: string,
    childList?: Array<EnumServiceItem>
}

// type of the Service list
type ServiceListType = Array<ServiceType>

let draggableList:ServiceListType =  [
        {
            id: "1",
            label: 'Parent Item 1',
            childList: [
                {
                    id: "11",
                    label: 'Child Item 1',
                },
                {
                    id: "12",
                    label: 'Child Item 2',
                }
                ,
                {
                    id: "13",
                    label: 'Child Item 3',
                }
            ]
        },
        {
            id: "2",
            label: 'Parent Item 2',
            childList: [
                {
                    id: "14",
                    label: 'Child Item 4',
                },
                {
                    id: "15",
                    label: 'Child Item 5',
                }
                ,
                {
                    id: "16",
                    label: 'Child Item 6',
                }
            ]
        },
        {
            id: "3",
            label: 'Parent Item 3',
            childList: [
                {
                    id: "17",
                    label: 'Child Item 7',
                },
                {
                    id: "18",
                    label: 'Child Item 8',
                }
                ,
                {
                    id: "19",
                    label: 'Child Item 9',
                }
            ]
        },

    ]

언급URL : https://stackoverflow.com/questions/25469244/how-can-i-define-an-interface-for-an-array-of-objects