[解決済み] タイプスクリプト ネストされたオブジェクトのインターフェースはどのように定義するのですか?
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
};
}
参考までに、以下は 実例へのリンク .
関連
-
[解決済み】Typescript : require文はimport文の一部ではない
-
[解決済み] Typescript ReferenceError: exports が定義されていません。
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] TypeScriptでオブジェクトに動的にプロパティを割り当てるには?
-
[解決済み] TypeScriptで配列の項目を削除するには?
-
[解決済み] Typescript オブジェクトのインデックス付きメンバの型を強制する?
-
[解決済み】TypeScriptのインターフェースと型について
-
[解決済み】オブジェクトの配列を定義するにはどうしたらいいですか?
-
[解決済み] TypeScriptのカスタムグローバルインターフェース(.d.tsファイル)を設定する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ts1206 デコレーターはここでは無効です、Angular 2。
-
[解決済み] TypeScriptでグローバル変数を作成する
-
[解決済み] TypeScriptの非同期関数でプロミスを返す
-
[解決済み] エラー TS2345: 型 'T' の引数は型 'object' のパラメータに代入できません。
-
[解決済み] TypeScriptでパラメータとして強く型付けされた関数は可能か?
-
[解決済み] TypeScriptの "*.d.ts "について
-
[解決済み] 'unknown' vs. 'any'
-
[解決済み] TypeScriptのファイル変更時にts-nodeを監視して再読み込みする方法
-
[解決済み】TypeScriptとフィールドイニシャライザー
-
[解決済み】Typescriptのパラメータ名のクエスチョンマークとは?