TypeScript Academy · บทเรียน

ตัวตรวจสอบชนิดข้อมูล

ทำงานกับชนิดข้อมูล unknown หรือ any อย่างปลอดภัยโดยใช้ตัวตรวจสอบชนิดข้อมูล

บทเรียน 4 จาก 410 ขั้นตอน

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

บทนำสู่ตัวตรวจสอบชนิดข้อมูล

ตัวตรวจสอบชนิดข้อมูล

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

ตัวตรวจสอบชนิดข้อมูล — ภาพประกอบ 1

ตัวตรวจสอบชนิดข้อมูลคืออะไร

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

ตัวอย่าง:

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

function isString(value: unknown): boolean {
  return typeof value === "string";
}

function printLength(value: unknown): void {
  if (isString(value)) {
    console.log(value.length); 
// TypeScript knows 'value' is a string here
  } else {
    console.log("Value is not a string");
  }
}

printLength("Hello"); 
// Output: 5
printLength(42); 
// Output: Value is not a string

การใช้ <code>typeof</code> กับค่าพื้นฐาน

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

ตัวอย่าง:

โจทย์: ใช้ typeof เพื่อแยกความแตกต่างระหว่างสตริงกับตัวเลขในฟังก์ชัน

function printValue(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String value: ${value}`);
  } else {
    console.log(`Number value: ${value}`);
  }
}

printValue("Hello"); 
// Output: String value: Hello
printValue(42); 
// Output: Number value: 42

การใช้ <code>instanceof</code> กับคลาส

ตัวดำเนินการ instanceof ตรวจสอบว่าออบเจ็กต์เป็นอินสแตนซ์ของคลาสที่ระบุหรือไม่ ตัวอย่าง:

โจทย์: ใช้ instanceof เพื่อจัดการอินสแตนซ์ของคลาสต่าง ๆ ในฟังก์ชัน

class Dog {
  bark(): void {
    console.log("Woof!");
  }
}

class Cat {
  meow(): void {
    console.log("Meow!");
  }
}

function makeSound(animal: Dog | Cat): void {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

let dog = new Dog();
let cat = new Cat();
makeSound(dog); 
// Output: Woof!
makeSound(cat); 
// Output: Meow!

การใช้ตัวตรวจสอบชนิดข้อมูลแบบกำหนดเอง

คุณสามารถสร้างฟังก์ชันตัวตรวจสอบชนิดข้อมูลแบบกำหนดเองได้โดยใช้ชนิดข้อมูลผลลัพธ์เป็น value is Type ตัวอย่าง:

interface Car {
  make: string;
  model: string;
}

interface Bike {
  brand: string;
  type: string;
}

function isCar(vehicle: Car | Bike): vehicle is Car {
  return (vehicle as Car).make !== undefined;
}

function printVehicle(vehicle: Car | Bike): void {
  if (isCar(vehicle)) {
    console.log(`Car: ${vehicle.make} ${vehicle.model}`);
  } else {
    console.log(`Bike: ${vehicle.brand} ${vehicle.type}`);
  }
}

let car: Car = { make: "Toyota", model: "Corolla" };
let bike: Bike = { brand: "Yamaha", type: "Sport" };

printVehicle(car); 
// Output: Car: Toyota Corolla
printVehicle(bike);
 // Output: Bike: Yamaha Sport

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

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

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

type Shape = Circle | Rectangle;

function calculateArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.width * shape.height;
  }
}

let circle: Circle = { kind: "circle", radius: 5 };
let rectangle: Rectangle = { kind: "rectangle", width: 10, height: 20 };

console.log(calculateArea(circle)); 
// Output: 78.53981633974483
console.log(calculateArea(rectangle)); 
// Output: 200

การตรวจสอบความครบถ้วนทุกกรณี

การตรวจสอบความครบถ้วนทุกกรณีช่วยให้แน่ใจว่ามีการจัดการทุกกรณีที่เป็นไปได้ในยูเนียนที่มีตัวจำแนกแล้ว ตัวอย่าง:

function getShapeInfo(shape: Shape): string {
  switch (shape.kind) {
    case "circle":
      return `Circle with radius ${shape.radius}`;
    case "rectangle":
      return `Rectangle with dimensions ${shape.width}x${shape.height}`;
    default:
      // This line ensures all cases are handled
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

ข้อผิดพลาดที่พบบ่อย

ข้อผิดพลาดที่พบบ่อยเมื่อใช้ตัวตรวจสอบชนิดข้อมูลมีดังนี้:

  • ลืมรวมทุกกรณีไว้ในชนิดยูเนียน
  • ไม่ได้ใช้ตัวตรวจสอบชนิดข้อมูลในทุกแขนงของตรรกะแบบมีเงื่อนไข
  • ใช้ as เพื่อแปลงชนิดข้อมูลโดยไม่มีการตรวจสอบที่เหมาะสม

เคล็ดลับ: ใช้ตัวตรวจสอบชนิดข้อมูลเพื่อจำกัดชนิดข้อมูลให้แคบลงก่อนเข้าถึงคุณสมบัติหรือเมธอดเฉพาะของชนิดข้อมูลนั้นเสมอ

ทำได้ยอดเยี่ยม

ขอแสดงความยินดี คุณได้เรียนรู้วิธีใช้ตัวตรวจสอบชนิดข้อมูลใน TypeScript เพื่อจำกัดชนิดข้อมูลให้แคบลงขณะโปรแกรมทำงานและรับรองความปลอดภัยด้านชนิดข้อมูลแล้ว ตัวตรวจสอบชนิดข้อมูลมีความสำคัญต่อการจัดการชนิดยูเนียนที่ซับซ้อนและการสร้างโค้ดที่แข็งแรงปราศจากข้อผิดพลาด ในบทเรียนถัดไป เราจะสำรวจชนิดข้อมูลแบบแมปขั้นสูง มาเขียนโค้ดกันต่อเลย

ตัวตรวจสอบชนิดข้อมูล — ภาพประกอบ 10
เริ่มต้นได้ฟรี

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

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

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

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

บทเรียน “ตัวตรวจสอบชนิดข้อมูล” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ตัวตรวจสอบชนิดข้อมูล”

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

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

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

บทเรียน “ตัวตรวจสอบชนิดข้อมูล” ใช้เวลานานแค่ไหน

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

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

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

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

  1. เจเนริกส์
  2. นามแฝงชนิดข้อมูลและอินเทอร์เฟซ
  3. ชนิดข้อมูลอรรถประโยชน์
  4. ตัวตรวจสอบชนิดข้อมูล
← กลับไปที่ TypeScript Academy