การจำกัดประเภท (Type Narrowing) คืออะไรและคอมไพเลอร์ทำอย่างไร

Question

Accepted Answer

**การจำกัดประเภท** คือวิธีที่ TypeScript ปรับแต่งประเภทที่กว้าง (เช่น union) ให้เป็นประเภทที่เฉพาะเจาะจงยิ่งขึ้นภายในสาขาโค้ด โดยอิงจากการตรวจสอบที่รันไทม์ คอมไพเลอร์ติดตามการไหลของการควบคุมและปรับปรุงประเภทตามลำดับ

```ts
function process(x: string | number) {
  if (typeof x === "string") {
    x.toUpperCase(); // ✅ here x is narrowed to string
  } else {
    x.toFixed(2);    // ✅ here x must be number
  }
}
```

## เครื่องมือการจำกัดประเภท

```ts
typeof x === "string"          // typeof guard — for primitives
x instanceof Date              // instanceof — for classes
"role" in obj                  // in operator — property existence
Array.isArray(x)               // built-in guards
if (x) { ... }                  // truthiness narrows out null/undefined/0/""
if (x === null) { ... }         // equality narrowing
```

## Union ที่จำแนกประเภท จำกัดประเภทได้อย่างสะอาด

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

function area(s: Shape) {
  switch (s.kind) {            // the discriminant
    case "circle": return Math.PI * s.r ** 2;  // s is the circle variant
    case "square": return s.side ** 2;          // s is the square variant
  }
}
```

การตรวจสอบฟิลด์ literal ที่ใช้ร่วมกัน (`kind`) บอกคอมไพเลอร์ว่าคุณมีรูปแบบใด ซึ่งจะปลดล็อกคุณสมบัติของรูปแบบนั้น

## Guard ที่กำหนดเองขยายการจำกัดประเภท

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

## ทำไมมันจึงสำคัญ

การจำกัดประเภทคือสิ่งที่ทำให้ union type *สามารถใช้ได้* — ช่วยให้คุณเข้าถึงสมาชิกเฉพาะของประเภทได้อย่างปลอดภัยหลังจากพิสูจน์ประเภทแล้ว โดยเปลี่ยนการตรวจสอบที่รันไทม์เป็นการรับประกันที่เวลาคอมไพล์

เป็นกลไกในแต่ละวันสำหรับการจัดการ `string | number`, `T | null`, และสถานะที่มีแท็ก