optional(?)과 readonly modifier는 무엇을 하나요?

Question

Accepted Answer

이 프로퍼티 modifier들은 프로퍼티가 **필수**인지, 그리고 **재할당**할 수 있는지를 제어합니다.

## Optional (`?`)

```ts
interface User {
  name: string;
  email?: string; // optional — 없을 수 있음
}

const a: User = { name: "Ann" };               // ✅ email 생략
const b: User = { name: "Bo", email: "b@x" };  // ✅ 포함

function f(u: User) {
  u.email.length;   // ❌ 오류: email은 'undefined'일 수 있음
  u.email?.length;  // ✅ optional chaining이 undefined 가능성을 처리
}
```

Optional 프로퍼티는 `T | undefined` 타입을 가지므로, 컴파일러가 없는 경우의 처리를 강제합니다 — "cannot read property of undefined" 버그를 방지합니다.

## readonly

```ts
interface Point { readonly x: number; readonly y: number; }
const p: Point = { x: 1, y: 2 };
p.x = 5; // ❌ 오류: readonly 프로퍼티에 할당할 수 없음

// 배열도
const nums: readonly number[] = [1, 2, 3];
nums.push(4); // ❌ readonly 배열에는 push가 존재하지 않음
```

`readonly`는 컴파일 타임에만 적용됩니다(런타임 강제는 없음). 하지만 타입 시스템에서 불변성을 문서화하고 강제하여 우발적인 변경을 잡아냅니다.

## 결합과 대규모 적용

```ts
interface Config { readonly id: string; tags?: readonly string[]; }
type Frozen = Readonly<User>; // 유틸리티 타입이 모든 프로퍼티를 readonly로
```

## 왜 중요한가

`?`는 진짜 선택적인 데이터를 모델링하고 null 안전성을 강제합니다. `readonly`는 불변성을 표현하고 강제합니다(config, props, 우발적 상태 변경 방지에 훌륭함).

둘 다 정확성 검사를 컴파일러로 밀어 넣습니다.

Optional (?)