TypeScript Academy · บทเรียน

in, instanceof และยูเนียนแบบจำแนก

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

บทเรียน 2 จาก 38 ขั้นตอน

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

บทนำ

เป้าหมาย: ฝึกใช้ตัวตรวจสอบอันทรงพลังสามแบบ ได้แก่ in สำหรับตรวจสอบพร็อพเพอร์ตี instanceof สำหรับคลาส และยูเนียนที่มีตัวแยกแยะสำหรับการแยกกรณีอย่างเป็นระเบียบ

ตัวดำเนินการ in

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

type HasLength = { length: number };

function print(v: string | HasLength) {
  if ("length" in v) {
    // v is HasLength
    console.log("len:", v.length);
  } else {
    // v is string
    console.log(v.toUpperCase());
  }
}

print({ length: 3 });
print("ts");

instanceof

instanceof ตรวจสอบต้นแบบของค่าที่สร้างจากคลาส ใช้งานได้เมื่อมีตัวสร้างให้เรียกใช้ขณะทำงาน

class Person {
  constructor(public name: string) {}
}

function hello(x: Person | Date) {
  if (x instanceof Person) {
    console.log("Hi", x.name);
  } else {
    console.log("Year", x.getFullYear());
  }
}

hello(new Person("Ada"));
hello(new Date(2024, 0, 1));

ยูเนียนที่มีตัวแยกแยะ

ยูเนียนที่มีตัวแยกแยะใช้แท็กลิเทอรัล เช่น kind เพื่อแยกกรณีได้อย่างชัดเจน พร้อมจำกัดชนิดข้อมูลอย่างครบถ้วนในแต่ละกรณี

type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; size: number };

type Shape = Circle | Square;

function area(s: Shape): number {
  switch (s.kind) {
    case "circle":
      return Math.PI * s.radius ** 2;
    case "square":
      return s.size * s.size;
  }
}

console.log(area({ kind: "circle", radius: 2 }));
console.log(area({ kind: "square", size: 3 }));

การรวมตัวตรวจสอบ

รวมการตรวจสอบแท็กเข้ากับ in เพื่อจำกัดชนิดข้อมูลของโครงสร้างที่ซ้อนกัน และเข้าถึงเฉพาะสมาชิกที่ปลอดภัย

type FetchOk = { status: "ok"; data: { length: number } };
type FetchErr = { status: "error"; message: string };

type Result = FetchOk | FetchErr;

function handle(r: Result) {
  if (r.status === "ok" && "length" in r.data) {
    console.log("items:", r.data.length);
  } else {
    console.log("error:", r.message);
  }
}

handle({ status: "ok", data: { length: 5 } });
handle({ status: "error", message: "oops" });

แนวทาง

แนวทาง:

  • ใช้ in กับยูเนียนที่แยกตามพร็อพเพอร์ตี
  • ใช้ instanceof กับคลาส
  • ใช้ยูเนียนที่มีตัวแยกแยะเพื่อควบคุมลำดับการทำงานให้ชัดเจน

ตรวจสอบตัวดำเนินการ in

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

ทบทวน

ทบทวน: inตรวจสอบพร็อพเพอร์ตี instanceofตรวจสอบคลาส และยูเนียนที่มีตัวแยกแยะช่วยให้การแยกกรณีด้วย switch ชัดเจนและปลอดภัยด้านชนิดข้อมูล

เริ่มต้นได้ฟรี

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

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

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

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

บทเรียน “in, instanceof และยูเนียนแบบจำแนก” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “in, instanceof และยูเนียนแบบจำแนก”

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

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

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

บทเรียน “in, instanceof และยูเนียนแบบจำแนก” ใช้เวลานานแค่ไหน

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

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

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

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

  1. typeof ความเท่ากัน และการจำกัดชนิดข้อมูลด้วยค่าจริงเท็จ
  2. in, instanceof และยูเนียนแบบจำแนก
  3. การตรวจสอบความครบถ้วนด้วย never (เบื้องต้น)
← กลับไปที่ TypeScript Academy