Typescript: ネストされたオブジェクトのインターフェースを定義するにはどうすればよいですか? 質問する

Typescript: ネストされたオブジェクトのインターフェースを定義するにはどうすればよいですか? 質問する

次のように解析される JSON ペイロードがあるとします。

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

items プロパティの値が、キーが文字列で、値が Item インターフェイスによって定義されているオブジェクトであることをモデル化するには、Example インターフェイスの定義をどのように設定すればよいでしょうか。

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

}

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

ベストアンサー1

Typescript では、構文を使用してオブジェクト キーの型を追加できます[key: string]

ドキュメントに記載されているように、これらはインデックス可能なタイプ:

インデックス可能な型には、オブジェクトにインデックスを付けるために使用できる型と、インデックス付け時に対応する戻り値の型を記述するインデックス シグネチャがあります。

あなたの場合は、次のものを使用します。

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

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

参考までに、実際の例へのリンク

おすすめ記事