[解決済み] Typescriptでオブジェクトのプロパティを結合する方法は?
2022-03-10 14:43:03
質問
例えば、次のような2つのオブジェクトがあるとして、これを行う最良の方法を知りたいのです。
var objectA = {
propertyA: 1,
propertyB: 2
...
propertyM: 13
}
var objectB = {
propertyN: 14,
propertyO: 15
...
propertyZ: 26
}
でオブジェクトCを作成した場合
var objectC = Object.assign(objectA, objectB);
objectCがobjectAとobjectBの両方のプロパティを持つことをコンパイラやIDEに認識させるには、どのように宣言/記述すればよいのでしょうか?
オブジェクトAとオブジェクトBのインターフェイスを定義する必要がない方法を見つけたいのですが。同じプロパティの宣言と定義・評価を2回書きたくないんです。オブジェクトのプロパティが多すぎると、この冗長性が大きくなります。
(既存のオブジェクトのインターフェース/タイプを抽出できる演算子はありますか?)
可能ですか?
どのように解決するのですか?
これでいいようだ。
var objectA = {
propertyA: 1,
propertyB: 2,
.
. // more properties here
.
propertyM: 13
};
var objectB = {
propertyN: 14,
propertyO: 15,
.
. // more properties here
.
propertyZ: 26
};
var objectC = {...objectA, ...objectB}; // this is the answer
var a = objectC.propertyA;
var n = objectC.propertyN;
この記事に基づいています。 https://blog.mariusschulz.com/2016/12/23/typescript-2-1-object-rest-and-spread
さらに、分解における変数の順番も重要です。 次のように考えてみましょう。
var objectA = {
propertyA: 1,
propertyB: 2, // same property exists in objectB
propertyC: 3
};
var objectB = {
propertyX: 'a',
propertyB: 'b', // same property exists in objectA
propertyZ: 'c'
};
// objectB will override existing properties, with the same name,
// from the decomposition of objectA
var objectC = {...objectA, ...objectB};
// result: 'b'
console.log(objectC.propertyB);
// objectA will override existing properties, with the same name,
// from the decomposition of objectB
var objectD = {...objectB, ...objectA};
// result: '2'
console.log(objectD.propertyB);
関連
-
[解決済み】Typescriptで、! (エクスクラメーションマーク/バン)演算子でメンバを再参照するのは?
-
[解決済み】プロパティ 'value' が 'HTMLElement' 型の値に存在しない。
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] TypeScriptでパラメータとして強く型付けされた関数は可能か?
-
[解決済み] TypeScriptでオブジェクトに動的にプロパティを割り当てるには?
-
[解決済み] JSONオブジェクトをTypeScriptのクラスにキャストする方法を教えてください。
-
[解決済み] TypeScriptのオブジェクトリテラルでの型定義
-
[解決済み】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 : require文はimport文の一部ではない
-
[解決済み] Apollo Serverでコンテキストオブジェクトを正しく入力するにはどうすればよいですか?
-
[解決済み] TypeScriptの「as const」の意味とその使用例とは?
-
[解決済み] TypeScriptでfetchを使う方法
-
[解決済み] Jestで関数をモックする方法
-
[解決済み] TypeScriptの "*.d.ts "について
-
[解決済み] チェックした後に○○の表現が変わっている
-
[解決済み】TypeScriptで型をnullableとして宣言する方法は?
-
[解決済み】tsconfig.jsonファイルを生成するにはどうしたらいいですか?
-
[解決済み】引数として渡されたTypeScriptオブジェクトにデフォルト値を設定する