スプレッド構文

TypeScript でオブジェクトのプロパティや配列の要素を展開して列挙するには、スプレッド構文を使います。

スプレッド構文はドット (.) ３つで記述します。

const person = {
    age: 25,
    firstName: 'Hanako',
    lastName: 'Yamada',
};

console.log(person);

const employee = {
    ...person, // ここでスプレッド構文を使っている
    area: 'Tokyo',
    title: 'Sales Manager',
};

console.log(employee);

この実行結果は次のようになります。

{ age: 25, 
  firstName: 'Hanako', 
  lastName: 'Yamada' }
{ age: 25, 
  firstName: 'Hanako',
  lastName: 'Yamada',
  area: 'Tokyo',
  title: 'Sales Manager' }

上のコードではまず person という変数で、名前 (firstName, lastName) や年齢 (age) などのプロパティを設定したオブジェクトを作っています。

次に person の内容をスプレッド構文で引き継いで、さらにエリア (area) とか役職 (title) などのプロパティを追加設定して、employee オブジェクトを作成しています。

このように、元のプロパティの内容を全て展開することを可能にするのがスプレッド構文です。

値を全部引き継いでから書き換える

スプレッド構文で値を引き継いだ後に、いくつかデータを更新することもできます。

例えば、上の例で person の内容の中で age だけ書き換えて、次のオブジェクトに引き継ぐには次のようにかけます。

const person = {
    age: 25,
    firstName: 'Hanako',
    lastName: 'Yamada',
};

console.log(person);

const employee = {
    ...person,
    age: 20,
    area: 'Tokyo',
    title: 'Sales Manager',
};

console.log(employee);

この実行結果は、次の通りです。

{ age: 25, 
  firstName: 'Hanako',
  lastName: 'Yamada' }
{ age: 20,
  firstName: 'Hanako',
  lastName: 'Yamada',
  area: 'Tokyo',
  title: 'Sales Manager' }

配列への適用

上の例ではオブジェクトのフィールドのコピーの例でしたが、配列でも同様です。

let a = [1, 2, 3, 4, 5];
let b = [...a];

b[3] = 100;

console.log(a);
console.log(b);

この実行結果は次のようになります。

[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 100, 5 ]

以上、ここではスプレッド構文について説明しました。