オプション(?)修飾子と readonly 修飾子は何をするものですか?

Question

Accepted Answer

これらのプロパティ修飾子は、プロパティが**必須**かどうか、および**再代入**できるかどうかを制御します。

## オプション(`?`)

```ts
interface User {
  name: string;
  email?: string; // optional — may be absent
}

const a: User = { name: "Ann" };               // ✅ email omitted
const b: User = { name: "Bo", email: "b@x" };  // ✅ included

function f(u: User) {
  u.email.length;   // ❌ Error: email is possibly 'undefined'
  u.email?.length;  // ✅ optional chaining handles the maybe-undefined
}
```

オプションプロパティは `T | undefined` 型を持つため、コンパイラは値が存在しないケースを処理することを強制します。これにより「undefined のプロパティを読み取れない」というバグを防げます。

## readonly

```ts
interface Point { readonly x: number; readonly y: number; }
const p: Point = { x: 1, y: 2 };
p.x = 5; // ❌ Error: cannot assign to readonly property

// arrays too
const nums: readonly number[] = [1, 2, 3];
nums.push(4); // ❌ push doesn't exist on readonly array
```

`readonly` はコンパイル時のみ有効(実行時には強制されない)ですが、型システム上で不変性を文書化して強制し、意図しないミューテーションを検出します。

## 組み合わせと大規模での利用

```ts
interface Config { readonly id: string; tags?: readonly string[]; }
type Frozen = Readonly<User>; // utility type makes ALL props readonly
```

## なぜ重要なのか

`?` は本当にオプションなデータをモデル化し、null 安全性を強制します。`readonly` は不変性を表現して強制します(設定や props、意図しない状態変更の防止に最適)。

どちらも正しさのチェックをコンパイラに押し付けます。