타이프스크립트:네스트된 객체의 인터페이스를 정의하려면 어떻게 해야 합니까?

타이프스크립트:네스트된 객체의 인터페이스를 정의하려면 어떻게 해야 합니까?

다음과 같은 JSON payload가 있다고 가정합니다.

{
    name: "test",
    items: {
        "a": {
            id: 1,
            size: 10
        },
        "b": {
            id: 2,
            size: 34
        }
    }
}

키가 문자열이고 값이 Item 인터페이스에 의해 정의된 개체인 항목 속성 값을 모델링하려면 예제 인터페이스의 정의를 어떻게 설정해야 합니까?

export interface Example {
    name: string;
    items: ???;

}

export interface Item {
    id: number;
    size: number;
}

Typescript를 사용하면 다음 구문을 사용하여 개체 키의 유형을 추가할 수 있습니다.[key: string].

매뉴얼에 기재되어 있는 바와 같이 이러한 타입을 인덱스 가능 타입이라고 부릅니다.

인덱스 가능 유형에는 인덱싱 시 해당 반환 유형과 함께 개체로 인덱싱하는 데 사용할 수 있는 유형을 설명하는 인덱스 서명이 있습니다.

이 경우 다음을 사용합니다.

export interface Item {
    id: number;
    size: number;
}

export interface Example {
    name: string;
    items: {
        [key: string]: Item
    };
}

참고로 여기 라이브 예에 대한 링크가 있습니다.

Record type을 사용하여 달성할 수 있습니다.

interface Item {
    id: number;
    size: number;
}


interface Example2 {
   name: string;
   items : Record<string, Item>; 

}

var obj2: Example2 = {
    name: "test",
    items: {
        "a": {
            id: 1,
            size: 10
        },
        "b": {
            id: 2,
            size: 34
        },
        "c": {
            id: 3,
            size: 34
        }
    }
}

컴파일 시간 체크도 받을 수 있습니다.

언급URL : https://stackoverflow.com/questions/42216053/typescript-how-do-i-define-interfaces-for-nested-objects