บทนำสู่ชนิดข้อมูลแบบมีเงื่อนไข

ชนิดข้อมูลแบบมีเงื่อนไขใน TypeScript ช่วยให้คุณสร้างชนิดข้อมูลที่ปรับเปลี่ยนแบบไดนามิกตามเงื่อนไข ทำให้โค้ดของคุณยืดหยุ่นและนำกลับมาใช้ใหม่ได้มากขึ้น

ชนิดข้อมูลเหล่านี้ใช้ไวยากรณ์ที่คล้ายกับตัวดำเนินการแบบมีเงื่อนไข (ternary) ของ JavaScript

ชนิดข้อมูลแบบมีเงื่อนไขคืออะไร

ชนิดข้อมูลแบบมีเงื่อนไขช่วยให้คุณกำหนดชนิดข้อมูลที่ขึ้นอยู่กับชนิดข้อมูลอื่น ไวยากรณ์พื้นฐานคือ:

T extends U ? X : Y

ความหมายคือ หาก T ขยายมาจาก U ชนิดข้อมูลนั้นจะเป็น X มิฉะนั้นจะเป็น Y

ตัวอย่างพื้นฐานของชนิดข้อมูลแบบมีเงื่อนไข

ตัวอย่างง่าย ๆ มีดังนี้:

type IsString<T> = T extends string ? 'Yes' : 'No';

// Test cases
type A = IsString<string>; // 'Yes'
type B = IsString<number>; // 'No'

การใช้ชนิดข้อมูลแบบมีเงื่อนไขกับการโอเวอร์โหลดฟังก์ชัน

ชนิดข้อมูลแบบมีเงื่อนไขช่วยทำให้การโอเวอร์โหลดฟังก์ชันง่ายขึ้น โดยกำหนดชนิดข้อมูลผลลัพธ์แบบไดนามิก:

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function getData(): string {
  return 'Hello';
}

type DataType = ReturnType<typeof getData>; // string

ชนิดข้อมูลแบบมีเงื่อนไขชนิดกระจาย

เมื่อใช้ชนิดข้อมูลแบบมีเงื่อนไขกับชนิดข้อมูลยูเนียน ชนิดข้อมูลเหล่านี้จะถูกกระจายไปยังสมาชิกแต่ละตัวของยูเนียน:

type ToArray<T> = T extends any ? T[] : never;

type A = ToArray<string | number>;
// A = string[] | number[]

การรวมชนิดข้อมูลแบบมีเงื่อนไขเข้ากับชนิดข้อมูลแบบแมป

คุณสามารถรวมชนิดข้อมูลแบบมีเงื่อนไขเข้ากับชนิดข้อมูลแบบแมป เพื่อสร้างการแปลงชนิดข้อมูลที่ทรงพลังได้:

type User = {
  id: number;
  name: string;
  isAdmin?: boolean;
};

type MakeRequired<T> = {
  [K in keyof T]-?: T[K] extends undefined ? never : T[K];
};

type RequiredUser = MakeRequired<User>;
// { id: number; name: string; isAdmin: never; }

กรณีการใช้งานทั่วไปของชนิดข้อมูลแบบมีเงื่อนไข

ชนิดข้อมูลแบบมีเงื่อนไขมักใช้สำหรับ:

• อนุมานชนิดข้อมูลผลลัพธ์หรือพารามิเตอร์
• แปลงชนิดข้อมูลยูเนียนและอินเตอร์เซกชัน
• สร้างชนิดข้อมูลอรรถประโยชน์ เช่น Exclude, Extract และ NonNullable

งานฝึกปฏิบัติ

สร้างชนิดข้อมูลแบบมีเงื่อนไขที่ตรวจสอบว่าชนิดข้อมูลเป็นอาร์เรย์หรือไม่ หากใช่ ให้คืนค่าชนิดข้อมูลของสมาชิกในอาร์เรย์ มิฉะนั้นให้คืนค่าชนิดข้อมูลนั้นเอง

ยินดีด้วย!

คุณได้เรียนรู้วิธีใช้ชนิดข้อมูลแบบมีเงื่อนไขเพื่อสร้างคำจำกัดความชนิดข้อมูลแบบไดนามิกและนำกลับมาใช้ใหม่ได้ใน TypeScript แล้ว ฝึกฝนแนวคิดเหล่านี้เพื่อเขียนโค้ด TypeScript ที่ทรงพลังและยืดหยุ่นยิ่งขึ้น