Readonly 配列と不変データ

ようこそ

配列に対するreadonly修飾子

const ids: readonly number[] = [1, 2, 3];
// ids.push(4);   // Error
// ids[0] = 99;   // Error
console.log(ids[0]); // OK — reading is fine

ReadonlyArray<T>ジェネリック形式

const names: ReadonlyArray<string> = ['Alice', 'Bob'];
// names.push('Charlie'); // Error

関数からreadonly配列を返す

function getConfig(): readonly string[] {
  return ['host', 'port', 'db'];
}

不変な関数パラメーター

function sum(nums: readonly number[]): number {
  return nums.reduce((a, b) => a + b, 0);
  // nums.push(99); // Error inside function
}

リテラル配列に対するas const

const colors = ['red', 'green', 'blue'] as const;
// type: readonly ['red', 'green', 'blue']
// colors.push('yellow'); // Error

Readonlyはディープフリーズではない

const users: readonly { name: string }[] = [{ name: 'Alice' }];
// users.push({}); // Error
users[0].name = 'Bob'; // Allowed — object itself is mutable

Readonly<T>による深い不変性

type ImmutableUser = Readonly<{ name: string; scores: readonly number[] }>;
const u: ImmutableUser = { name: 'Alice', scores: [90, 85] };
// u.name = 'Bob';       // Error
// u.scores.push(100);  // Error

変更可能な配列とreadonly配列の代入

const ro: readonly number[] = [1, 2];
const mutable: number[] = ro; // Error!

readonly配列を使用する場合

スプレッドで新しい変更可能な配列を作成する

const base: readonly number[] = [1, 2, 3];
const extended: number[] = [...base, 4]; // new mutable array

クイックチェック

まとめ