user-defined type guard คืออะไร?

Question

Accepted Answer

**user-defined type guard** คือฟังก์ชันที่มี return type เป็น **type predicate** (`x is T`) เมื่อฟังก์ชันคืนค่า `true` คอมไพเลอร์จะ narrow argument ให้เป็น `T` ในโค้ดที่เรียกใช้ ทำให้คุณสามารถห่อหุ้มการตรวจสอบตอน runtime แบบกำหนดเองเอาไว้ได้

```ts
interface Cat { meow(): void; }
interface Dog { bark(): void; }

// the magic is the return type `pet is Cat`, not just `boolean`
function isCat(pet: Cat | Dog): pet is Cat {
  return "meow" in pet;
}

function speak(pet: Cat | Dog) {
  if (isCat(pet)) {
    pet.meow(); // ✅ narrowed to Cat
  } else {
    pet.bark(); // ✅ narrowed to Dog
  }
}
```

หากไม่มี predicate `pet is Cat` การที่ `isCat` คืนค่าเป็น `boolean` จะ *ไม่* narrow `pet` ให้ คอมไพเลอร์จะยังคงเห็นเป็น `Cat | Dog` ภายใน `if` predicate คือสิ่งที่สอนให้คอมไพเลอร์รู้

## การตรวจสอบความถูกต้องของข้อมูลภายนอกที่เป็น unknown

```ts
interface User { id: number; name: string; }

function isUser(x: unknown): x is User {
  return (
    typeof x === "object" && x !== null &&
    typeof (x as any).id === "number" &&
    typeof (x as any).name === "string"
  );
}

const data: unknown = await res.json();
if (isUser(data)) data.name; // ✅ safely typed as User
```

## ข้อควรระวัง

คอมไพเลอร์ **เชื่อ** predicate ของคุณ ถ้า logic ในตัวฟังก์ชันผิด คุณก็จะได้ narrowing ที่ไม่ปลอดภัย สำหรับรูปร่างข้อมูลที่ซับซ้อน schema validator (zod) จะสร้าง guard ที่ถูกต้องให้คุณได้

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

type guard ช่วยให้คุณเปลี่ยนการตรวจสอบตอน runtime แบบใด ๆ ให้กลายเป็นฟังก์ชัน narrowing ที่นำกลับมาใช้ซ้ำได้ ซึ่งจำเป็นสำหรับการตรวจสอบข้อมูล `unknown` ที่ขอบเขต/API และสำหรับการแยกแยะสมาชิกของ union เมื่อการตรวจสอบด้วย `typeof`/`in` แบบง่าย ๆ เพียงอย่างเดียวไม่เพียงพอ