Các modifier optional (?) và readonly làm gì?

Question

Accepted Answer

Các modifier thuộc tính này kiểm soát việc một thuộc tính có **bắt buộc** hay không và có thể bị **gán lại** hay không.

## Optional (`?`)

```ts
interface User {
  name: string;
  email?: string; // optional — có thể vắng mặt
}

const a: User = { name: "Ann" };               // ✅ bỏ qua email
const b: User = { name: "Bo", email: "b@x" };  // ✅ có email

function f(u: User) {
  u.email.length;   // ❌ Lỗi: email có thể là 'undefined'
  u.email?.length;  // ✅ optional chaining xử lý trường hợp có-thể-undefined
}
```

Một thuộc tính optional có kiểu `T | undefined`, nên compiler buộc bạn xử lý trường hợp vắng mặt — ngăn các bug "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; // ❌ Lỗi: không thể gán cho thuộc tính readonly

// mảng cũng vậy
const nums: readonly number[] = [1, 2, 3];
nums.push(4); // ❌ push không tồn tại trên mảng readonly
```

`readonly` chỉ tồn tại lúc compile-time (không có cưỡng chế ở runtime), nhưng nó ghi rõ và cưỡng chế tính bất biến trong type system, bắt được các mutation vô tình.

## Kết hợp và ở quy mô lớn

```ts
interface Config { readonly id: string; tags?: readonly string[]; }
type Frozen = Readonly<User>; // utility type biến TẤT CẢ thuộc tính thành readonly
```

## Tại sao điều này quan trọng

`?` mô hình hóa dữ liệu thực sự optional và buộc null-safety; `readonly` biểu đạt và cưỡng chế tính bất biến (rất tốt cho config, props và ngăn mutation state vô tình).

Cả hai đẩy việc kiểm tra tính đúng đắn vào compiler.

Optional (?)

readonly

Kết hợp và ở quy mô lớn

Tại sao điều này quan trọng

Optional (`?`)