[解決済み] TypeScriptでオブジェクトに動的にプロパティを割り当てるには?
質問
Javascriptでオブジェクトにプログラム的にプロパティを割り当てる場合、次のようにします。
var obj = {};
obj.prop = "value";
しかし、TypeScriptでは、これはエラーが発生する。
プロパティ 'prop' はタイプ '{}' の値には存在しません。
TypeScriptでオブジェクトに新しいプロパティを割り当てるにはどうしたらいいのでしょうか?
どのように解決するのですか?
インデックスの種類
を表記することができます。
obj
として
any
しかし、それではtypescriptを使う意味がありません。
obj = {}
を意味します。
obj
は
Object
. としてマークする
any
は意味をなさない。望ましい一貫性を実現するために、次のようなインターフェイスを定義することができる。
interface LooseObject {
[key: string]: any
}
var obj: LooseObject = {};
ORでコンパクトにする。
var obj: {[k: string]: any} = {};
LooseObject
は、任意の文字列をキーとするフィールドを受け入れることができ
any
型を値とする。
obj.prop = "value";
obj.prop2 = 88;
このソリューションの真のエレガンスは、インターフェイスにタイプセーフのフィールドを含めることができることです。
interface MyType {
typesafeProp1?: number,
requiredProp1: string,
[key: string]: any
}
var obj: MyType ;
obj = { requiredProp1: "foo"}; // valid
obj = {} // error. 'requiredProp1' is missing
obj.typesafeProp1 = "bar" // error. typesafeProp1 should be a number
obj.prop = "value";
obj.prop2 = 88;
Record<Keys,Type>
ユーティリティタイプ
<ブロッククオート更新(2020年8月)。@transang がコメントで取り上げてくれました
Record<Keys,Type>
はtypescriptのUtility型である。これは,プロパティ名がわからないKey-Valueペアのための,よりクリーンな代替手段である.
注目すべきは
Record<Keys,Type>
の名前付きエイリアスです。
{[k: Keys]: Type}
ここで
Keys
と
Type
はジェネリックです。
IMOでは、これはここで言及する価値があります。
比較のために
var obj: {[k: string]: any} = {};
になる
var obj: Record<string,any> = {}
MyType
を拡張して定義することができるようになりました。
interface MyType extends Record<string,any> {
typesafeProp1?: number,
requiredProp1: string,
}
これはOriginalの質問の答えですが、その答えは ここで の@GreeneCreationsは、この問題にアプローチする方法について、別の視点を与えてくれるかもしれません。
関連
-
[解決済み] TypeScriptエラー TS1005: ';' が予想される (II)
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] クラス定数を実装するには?
-
[解決済み] JSONオブジェクトをTypeScriptのクラスにキャストする方法を教えてください。
-
[解決済み] TypeScriptの "*.d.ts "について
-
[解決済み] TypeScriptのオブジェクトリテラルでの型定義
-
[解決済み] Typescript によるインターフェース型チェック
-
[解決済み] noImplicitAnyフラグを有効にしてtypescriptをコンパイルすると、"Index signature of object type implicitly has an 'any' type "というエラーが発生しますが、どうすれば防ぐことができますか?
-
[解決済み】TypeScriptのインターフェースと型について
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] TypeScriptエラー TS1005: ';' が予想される (II)
-
[解決済み] タイプスクリプトのエラーです。TS7053 要素が暗黙のうちに 'any' 型を持っています。
-
[解決済み] 'タイプ 'never'にプロパティが存在しません。
-
[解決済み] TypeScriptのInterface Function Property。何が違うの?
-
[解決済み] TypeScriptでオブジェクトを初期化する方法
-
[解決済み] モジュール 'module-name' の宣言ファイルが見つかりませんでした。'/path/to/module-name.js' は暗黙のうちに 'any' 型を持っています。
-
[解決済み] 'unknown' vs. 'any'
-
[解決済み] String型とstring型の違いは何ですか?
-
[解決済み】TypeScriptで型をnullableとして宣言する方法は?
-
[解決済み】TypeScriptとフィールドイニシャライザー