in, instanceof และยูเนียนแบบจำแนก
ใช้การตรวจสอบ in หรือคุณสมบัติ ใช้ instanceof กับคลาส และใช้ยูเนียนแบบจำแนกเพื่อแยกแขนงอย่างปลอดภัย
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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- typeof ความเท่ากัน และการจำกัดชนิดข้อมูลด้วยค่าจริงเท็จ
- in, instanceof และยูเนียนแบบจำแนก
- การตรวจสอบความครบถ้วนด้วย never (เบื้องต้น)