TypeScirpt でオブジェクトをコピーする方法

TypeScirpt で、オブジェクトの全てのキーの値を、別のインスタンスのオブジェクトにコピーする方法を解説します。

スポンサーリンク

スプレッド演算子でコピー

これまでは、オブジェクトのキーでループをを回して、１つずつ値をコピーするような方法も見られましたが、スプレッド演算子の登場によって、１行でオブジェクトの全てのキーの値をコピーすることが可能になりました。

// コピー元のオブジェクト
let source = new User();
source.id = 1;
source.name = "Yamada";

//スプレッド演算子で User クラスのプロぱティをすべてコピー
let dust = {...source};
console.log(dust);  //{ "id": 1, "name": "Yamada" }

instanceof で型判定をする場合は要注意

スプレッド演算子でコピーしたオブジェクトの型は object となるため、instanceof 演算子を使って方判定を行っているプログラムであった場合は、コピー先のオブジェクトに対し、以下のような型反映を行っているプログラムは正しく動作しないことに注意をしましょう。

let source = new User();
let dust = {...source};
console.log(dust instanceof User);  // false

たとえ as で型変換（キャスト）したとしても 型はobject から変わらないため、次の型判定は正常に動作しません。

let dustUser: User = (dust as User);
console.log(typeof dustUser);          //object
console.log(dustUser instanceof User); //false

スポンサーリンク

Object.assign でコピー

Object.assign は２つのオブジェクトをマージする関数で、マージの際に、同じキーのプロパティの値はコピー元の値で上書きされます。

この、Object.assign 関数を使ったコピーは次のようになります。

// コピー元のオブジェクト
let source = new User();
source.id = 1;
source.name = "Yamada";

// コピー先のオブジェクトのインスタンスを作成
let dust = new User();

// Object.assignで source の値を dust にコピー
Object.assign(dust, source);
console.log(dust);                  //{ "id": 1, "name": "Yamada" }
console.log(dust instanceof User);  //true

instanceof の型判定も正常に動作する

上の結果のとおり、Object.assign を使ったコピーでは、予めコピー先のインスタンスを生成するため、instanceof 演算子による型判定も想定通りに動きます。

まとめ

スプレッド演算子と Object.assign を使ってオブジェクトをコピーする方法を紹介してきました。

スプレッド演算子の方がモダンな書き方にはなりますが、instanceof の型判定のことを考えると、従来の JavaScript からある関数の Object.assign を使った方が無難といえるでしょう。