TypeScript で immutable な配列を利用する

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

型定義

配列 T[] を利用する場面で ReadonlyArray<T> を利用する事で immutable な配列を定義することができます。 ReadonlyArray<T> の型定義には配列の内容を変更するためのメソッドが定義されていないため、push や pop の様な配列を変更する操作ができなくなります。

const array: ReadonlyArray<number> = [1, 2, 3];

配列を変更する

ReadonlyArray<T> では push や pop の様な配列を変更する操作が行えません。そのためスプレッド演算子 (...) を利用して配列のコピーを作成することが一般的です。

export function concat<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): ReadonlyArray<T> {
  return [...a, ...b];
}

ReadonlyArray<T> を通常の配列に代入する

ReadonlyArray<T> で作成した配列を通常の配列 T[] に代入する場合にはスプレッド演算子 (...) を利用して配列のコピーを作成することが一般的です。 キャストで代入可能なように変換することも可能ですが、配列の内容を変更されてしまった場合に ReadonlyArray<T> の内容も変更されてしまうため、そういった問題を避けるためにコピーを渡すことが多いです。

const array1: ReadonlyArray<number> = [1, 2, 3];
const array2: number[] = [...array1];

参考資料

• TypeScript: Documentation - Object Types

Tweet