1. ホーム
  2. typescript

[解決済み] タイプスクリプト ネストされたオブジェクトのインターフェースはどのように定義するのですか?

2022-05-11 04:20:11

質問

以下のようにパースされる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;
}

解決方法は?

Typescript では、以下の構文を使ってオブジェクトのキーに型を追加することができます。 [key: string] .

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

インデックス可能な型にはインデックス署名があり、オブジェクトへのインデックス作成に使用できる型と、インデックス作成時に対応する戻り値の型が記述されています。

あなたの場合、次のように使うことになります。

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

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

参考までに、以下は 実例へのリンク .