TypeScript Academy · บทเรียน

ยูเนียนแบบมีตัวแยกแยะสำหรับการจับคู่รูปแบบอย่างปลอดภัย

เพิ่มฟิลด์ลิเทอรัลร่วมให้สมาชิกของยูเนียนเพื่อความปลอดภัยของชนิด

บทเรียน 3 จาก 413 ขั้นตอน

ยูเนียนแบบมีตัวแยกแยะสำหรับการจับคู่รูปแบบอย่างปลอดภัย เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

ยินดีต้อนรับ

ยูเนียนแบบมีตัวจำแนกจะเพิ่มคุณสมบัติลิเทอรัลร่วมให้กับสมาชิกยูเนียน TypeScript ใช้ตัวจำแนกนี้เพื่อจำกัดประเภทในคำสั่ง switch และ if

คุณสมบัติตัวจำแนก

ตัวจำแนกคือคุณสมบัติที่มีประเภทลิเทอรัลเฉพาะในสมาชิกยูเนียนแต่ละตัว TypeScript จะจำกัดประเภทยูเนียนตามค่าของคุณสมบัตินี้
type Circle = { kind: 'circle'; radius: number };
type Square = { kind: 'square'; side: number };
type Shape = Circle | Square;

การจำกัดประเภทด้วยการตรวจสอบ if

ตรวจสอบตัวจำแนกในคำสั่ง if TypeScript จะจำกัดประเภทให้เหลือสมาชิกที่ตรงกัน
function area(shape: Shape): number {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius ** 2;
  }
  return shape.side ** 2; // narrowed to Square
}

การจำกัดประเภทด้วย switch/case

คำสั่ง switch ทำงานร่วมกับยูเนียนแบบมีตัวจำแนกได้อย่างเหมาะสม แต่ละ case จะจำกัดประเภทให้เหลือสมาชิกเฉพาะตัว
function describe(shape: Shape): string {
  switch (shape.kind) {
    case 'circle': return `Circle r=${shape.radius}`;
    case 'square': return `Square s=${shape.side}`;
  }
}

การตรวจสอบความครบถ้วนด้วย never

เพิ่มกรณี default ที่กำหนดค่าให้กับ `never` หากเพิ่มสมาชิกยูเนียนใหม่แต่ลืมจัดการสมาชิกนั้น TypeScript จะแจ้งข้อผิดพลาด
function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle': return Math.PI * shape.radius ** 2;
    case 'square': return shape.side ** 2;
    default:
      const _exhaustive: never = shape;
      throw new Error('Unhandled shape');
  }
}

รูปแบบประเภทผลลัพธ์

ยูเนียนแบบมีตัวจำแนกเหมาะอย่างยิ่งกับรูปแบบผลลัพธ์ ซึ่งส่งกลับข้อมูลเมื่อสำเร็จหรือข้อผิดพลาดโดยไม่ต้องโยนข้อผิดพลาด
type Ok<T> = { ok: true; value: T };
type Err = { ok: false; error: string };
type Result<T> = Ok<T> | Err;

รูปแบบประเภทการกระทำ (รูปแบบ Redux)

ใน Redux และระบบที่คล้ายกัน การกระทำต่าง ๆ เป็นยูเนียนแบบมีตัวจำแนก ฟิลด์ `type` คือตัวจำแนก
type Action =
  | { type: 'INCREMENT'; amount: number }
  | { type: 'DECREMENT'; amount: number }
  | { type: 'RESET' };

คุณสมบัติตัวจำแนกหลายรายการ

ตัวจำแนกไม่จำเป็นต้องเป็นคุณสมบัติเดียว TypeScript สามารถจำกัดประเภทจากการตรวจสอบหลายอย่างร่วมกันได้
type AdminUser = { role: 'admin'; permissions: string[] };
type RegularUser = { role: 'user'; credits: number };
type User = AdminUser | RegularUser;

ยูเนียนที่ไม่มีตัวจำแนกก็ยังจำกัดประเภทได้

แม้ไม่มีตัวจำแนก TypeScript ก็ยังจำกัดประเภทยูเนียนได้โดยใช้ typeof, instanceof และการตรวจสอบคุณสมบัติ
type StringOrArr = string | string[];
function flatten(val: StringOrArr): string[] {
  return Array.isArray(val) ? val : [val];
}

ยูเนียนแบบมีตัวจำแนกกับลำดับชั้นคลาส

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

ตัวอย่างจริง: ยูเนียนการตอบกลับ HTTP

จำลองสถานะการตอบกลับจากส่วนติดต่อโปรแกรมประยุกต์ที่แตกต่างกันเป็นยูเนียนแบบมีตัวจำแนก
type ApiState<T> =
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; message: string };

ตรวจสอบความเข้าใจอย่างรวดเร็ว

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

ทบทวน

ยูเนียนแบบมีตัวจำแนกใช้คุณสมบัติลิเทอรัลร่วมเป็นตัวจำแนก จำกัดประเภทด้วย switch/case และเพิ่มการตรวจสอบความครบถ้วนด้วย never เพื่อจับกรณีที่ไม่ได้จัดการ ยูเนียนรูปแบบนี้เหมาะสำหรับเครื่องจักรสถานะ การกระทำ และการตอบกลับจากส่วนติดต่อโปรแกรมประยุกต์
เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
101
บทเรียน
352

คำถามที่พบบ่อย

บทเรียน “ยูเนียนแบบมีตัวแยกแยะสำหรับการจับคู่รูปแบบอย่างปลอดภัย” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ยูเนียนแบบมีตัวแยกแยะสำหรับการจับคู่รูปแบบอย่างปลอดภัย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ยูเนียนแบบมีตัวแยกแยะสำหรับการจับคู่รูปแบบอย่างปลอดภัย”

เพิ่มฟิลด์ลิเทอรัลร่วมให้สมาชิกของยูเนียนเพื่อความปลอดภัยของชนิด คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ยูเนียนแบบมีตัวแยกแยะสำหรับการจับคู่รูปแบบอย่างปลอดภัย” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ชนิดยูเนียน: A หรือ B
  2. ชนิดอินเตอร์เซกชัน: A และ B
  3. ยูเนียนแบบมีตัวแยกแยะสำหรับการจับคู่รูปแบบอย่างปลอดภัย
  4. รูปแบบการใช้งานจริงของยูเนียนและอินเตอร์เซกชัน
← กลับไปที่ TypeScript Academy