TypeScript Guide: เจาะลึกการใช้งาน Union Types ใน Argument ของฟังก์ชัน
ในโลกของการพัฒนาซอฟต์แวร์ที่ต้องการความแม่นยำและลดข้อผิดพลาดทาง Runtime, TypeScript ได้กลายเป็นเครื่องมือสำคัญในการสร้างโค้ดที่มีโครงสร้างแข็งแรง การกำหนดประเภทข้อมูลอย่างชัดเจนถือเป็นหัวใจหลักของมัน และหนึ่งในคุณสมบัติขั้นสูงแต่ทรงพลังที่สุดคือ Union Type
บทความนี้จะพาเจาะลึกถึงวิธีการใช้ Union Types เพื่อจำกัดชนิดข้อมูลที่เป็นไปได้สำหรับพารามิเตอร์หรือ Arguments ที่ส่งเข้าสู่ฟังก์ชัน ทำให้เราสามารถเขียน Logic Handler สำหรับสถานการณ์หลากหลายโดยไม่สูญเสียประโยชน์ด้าน Safety Typing เลยแม้แต่น้อย หากก่อนหน้านี้ท่านเคยสงสัยว่าจะมีวิธีจัดการกับ Input ที่อาจจะเป็น String หรือ Number ก็ได้อย่างไร โดยยังคงให้ Compiler ช่วยตรวจสอบ เรามาดูคำตอบกันครับ
💡 ทำไมต้องใช้ Union Types กับ Function Arguments?
บ่อยครั้งที่เราพบเจอ API Endpoint หรือส่วนประกอบ (Component) ต่างๆ ซึ่งรับค่าอินพุตที่ไม่ตายตัว ตัวอย่างเช่น ฟังก์ชันประมวลผล ID อาจจะต้องรองรับทั้งรูปแบบสตริง (‘abc-123’) เมื่อมาจาก HTTP Header และ Integer (456789) เมื่อถูกเรียกจากฐานข้อมูล ด้วยการประกาศ Argument ให้มีเพียงประเภทเดียว จะทำให้ระบบขาดความยืดหยุ่น แต่ถ้าปล่อยให้อินพุตไม่มี type ตรวจสอบเลยก็จะนำไปสู่บั๊กที่แก้ไขยาก
- ข้อดีหลัก: ความปลอดภัยในการพัฒนาและการใช้งานร่วมกัน ใช้กำหนดขอบเขตของ Type ได้ชัดเจน
- Solution for Flexibility: แทนที่จะเลือกแค่หนึ่งในหลาย ๆ ประเภท, TypeScript อนุญาตให้ระบุได้ทั้งหมดด้วยเครื่องหมาย
|เช่น(arg: string | number): void.
🧩 การควบคุม Logic อย่างเป็นขั้นสูงผ่าน ‘Type Narrowing’
เมื่อฟังก์ชันของเรายอมรับ Input ที่อยู่ในรูป Union Type แล้ว ขั้นตอนต่อไปคือสิ่งที่สำคัญที่สุด นั่นคือเราไม่สามารถเข้าถึงคุณสมบัติหรือเมธอดเฉพาะเจาะจงกับทุกกรณีได้โดยตรง เราจำเป็นต้องใช้เทคนิคที่เรียกว่า Type Guard หรือ Type Narrowing เพื่อบอก Compiler ว่า ณ จุดนี้ ตัวแปรที่เรากำลังทำงานอยู่ มีชนิดใดอย่างน้อยก็ว่าเป็นแบบ A ไม่ใช่ B
ตัวอย่างโค้ดเพื่อทำความเข้าใจการจำกัดประเภท (Narrowing)
function processIdentifier(idArg: string | number): void {
// ตรวจสอบว่า idArgument เป็น String ก่อนเสมอ นี่คือหลักการ Pattern Matching
if (typeof idArg === 'string') {
console.log(`ID นี้ถูกจัดการเสมือนข้อความและมีความยาว ${idArg.length} อักขระ`);
// ในบล็อกนี้ TypeScript รู้แล้วว่า idArg คือ string แน่นอน จึงเรียก .toUpperCase() ได้เลย
const upperId = idArg.toUpperCase();
} else if (Number.isNaN((idArg as unknown) % 1)) { // ใช้ Number Check สำหรับ Integer ที่ถูกต้องเท่านั้น
console.error(