ในโลกของการพัฒนาซอฟต์แวร์ที่ต้องการความแม่นยำและบำรุงรักษาได้ง่าย TypeScript ได้ก้าวเข้ามาเป็นเครื่องมือสำคัญในการเสริมพลังให้กับ JavaScript ด้วยระบบ Type System ที่แข็งแกร่ง หนึ่งในคุณสมบัติที่มีประโยชน์อย่างยิ่งสำหรับนักพัฒนามืออาชีพคือ Union Types มันช่วยให้เราสามารถระบุว่าตัวแปรหรือพารามิเตอร์ใดๆ สามารถรับค่าที่เป็นชนิดข้อมูลหลายประเภทพร้อมกันได้อย่างไร
TypeScript Union Types คืออะไร?
พูดโดยสรุป, Union Type ใน TypeScript เปรียบเสมือนการบอกคอมไพเลอร์ว่า ‘สิ่งนี้อาจจะเป็น A หรือ B ก็ได้’ โดยใช้สัญลักษณ์ Pipe (|) ตัวอย่างเช่น หากคุณประกาศตัวแปรชื่อ `id` ว่ามี Union Type เป็น `string | number` หมายความว่า ณ จุดนั้น คอมไพลเรอร์จะอนุญาตให้โค้ดของคุณส่งผ่านทั้งสตริงและหมายเลขจำนวนเต็มไปยังตำแหน่งดังกล่าว นี่ไม่ใช่แค่เรื่องของ syntax แต่เป็นการเพิ่มระดับชั้นของความปลอดภัยทางประเภท (Type Safety) ให้กับโปรเจ็กต์ของเรา ทำให้ลดโอกาสเกิดบั๊กจากการใช้งานผิดประเภทตั้งแต่ขั้นตอน Compile Time เลยทีเดียว
สถานการณ์ที่ควรใช้ Union Types: การจัดการ Input และ API Response
แนวคิดหลักของการใช้ Unions มักเกิดขึ้นเมื่อฟังก์ชันหนึ่งต้องประมวลผลอินพุตจากแหล่งกำเนิดที่มีรูปแบบหลากหลาย เช่น ข้อมูล ID ที่มาจากฐานข้อมูลบางครั้งเป็น Integer แต่มันถูกเรียกมาในส่วน Frontend แล้วแปลงเป็น String ดังนั้นแทนที่จะกำหนด type เดียว เราจึงควรกำหนดว่าเป็น number | string นอกจากนี้ยังรวมถึงกรณีที่เรากำลังเขียน State Management สำหรับ UI Component ซึ่งค่า Status อาจจะเป็นข้อความเป็นคำอธิบาย (‘Pending’), ค่า Boolean เพื่อระบุสำเร็จ/ล้มเหลว, หรือแม้แต่ Object พิเศษสำหรับเก็บ Error Details
// ตัวอย่างการประกาศ Union Type บนตัวแปร\nlet userId: number | string =