TypeScript で immutable なオブジェクトを利用する

TypeScript で immutable なオブジェクトを利用する

TypeScript で immutable なオブジェクトを利用する方法を紹介します。 TypeScript でオブジェクトを作成する際の型情報を設定することによって immutable なオブジェクトを利用することができます。 ただし、この機能は TypeScript の型チェックの話になるため、トランスパイル後の JavaScript を外部から直接利用する場合には immutable ではない利用も可能です。

型定義

TypeScript でデータ型を定義する場合には class ではなく interface を利用する事が一般的です。 immutable にする場合にはメンバー全てを readonly にします。 メンバーに配列が居る場合には ReadonlyArray を利用します。 immutable にしたいオブジェクト内で利用しているオブジェクト全てに対して同様の処置をします。 オブジェクトを変数に代入する際には変数を const で定義する様にします。

export interface User {
  readonly id: number;
  readonly name: string;
  readonly age: number;
  readonly hobbies: ReadonlyArray<string>;
}

const taro: User = {
  id: 1,
  name: '太郎',
  age: 20,
  hobbies: ['読書'],
};

内容を更新する場合

immutable なオブジェクトの内容を更新するにはスプレッド演算子 (...) を利用してオブジェクトのコピーを作成することが一般的です。

export function happyBirthday(user: User): User {
  return {
    ...user,
    age: user.age + 1,
  };
}

const taro2022: User = {
  id: 1,
  name: '太郎',
  age: 20,
  hobbies: ['読書'],
};
const taro2023: User = happyBirthday(taro2022);

参考資料

• スプレッド演算子 - TypeScript Deep Dive 日本語版

Tweet