Type narrowing là gì và compiler thực hiện nó như thế nào?

Question

Accepted Answer

**Narrowing** là cách TypeScript tinh chỉnh một type rộng (như một union) thành một type cụ thể hơn trong một nhánh code, dựa trên các kiểm tra lúc runtime. Compiler theo dõi luồng điều khiển (control flow) và cập nhật type tương ứng.

```ts
function process(x: string | number) {
  if (typeof x === "string") {
    x.toUpperCase(); // ✅ ở đây x được narrow thành string
  } else {
    x.toFixed(2);    // ✅ ở đây x phải là number
  }
}
```

## Các công cụ narrowing

```ts
typeof x === "string"          // typeof guard — cho các kiểu nguyên thủy
x instanceof Date              // instanceof — cho các class
"role" in obj                  // toán tử in — kiểm tra sự tồn tại của property
Array.isArray(x)               // các guard tích hợp sẵn
if (x) { ... }                  // tính truthy narrow loại bỏ null/undefined/0/""
if (x === null) { ... }         // narrowing bằng so sánh bằng (equality)
```

## Discriminated union narrow một cách gọn gàng

```ts
type Shape =
  | { kind: "circle"; r: number }
  | { kind: "square"; side: number };

function area(s: Shape) {
  switch (s.kind) {            // discriminant
    case "circle": return Math.PI * s.r ** 2;  // s là biến thể circle
    case "square": return s.side ** 2;          // s là biến thể square
  }
}
```

Việc kiểm tra trường literal chung (`kind`) cho compiler biết chính xác bạn đang có biến thể nào, mở khóa các property của biến thể đó.

## Custom guard mở rộng narrowing

```ts
function isUser(x: unknown): x is User { return !!x && typeof (x as any).name === "string"; }
```

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

Narrowing chính là thứ làm cho union type *dùng được* — nó cho phép bạn truy cập an toàn các thành viên đặc thù của type chỉ sau khi đã chứng minh được type, biến các kiểm tra runtime thành các đảm bảo lúc biên dịch.

Đây là cơ chế hàng ngày đằng sau việc xử lý `string | number`, `T | null`, và các trạng thái được gắn nhãn (tagged state).