0Pricing
TypeScript Academy · บทเรียน

ฟังก์ชันตรวจสอบชนิดที่ผู้ใช้กำหนด

เขียนเพรดิเคต is เพื่อสร้างตัวตรวจสอบชนิดแบบกำหนดเอง

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

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

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

ประเภทค่าที่ส่งกลับแบบเพรดิเคต is

ฟังก์ชันตัวป้องกันประเภทส่งกลับ `paramName is Type` เมื่อฟังก์ชันส่งกลับค่า true TypeScript จะจำกัดพารามิเตอร์ให้เป็นประเภทนั้น
function isString(val: unknown): val is string {
  return typeof val === 'string';
}

การใช้ตัวป้องกันประเภท

เรียกใช้ตัวป้องกันประเภทในเงื่อนไข if TypeScript จะจำกัดประเภทภายในบล็อก
function process(val: unknown) {
  if (isString(val)) {
    console.log(val.toUpperCase()); // val: string
  }
}

ตัวป้องกันประเภทสำหรับอินเทอร์เฟซ

เนื่องจากคุณใช้ instanceof กับอินเทอร์เฟซไม่ได้ ตัวป้องกันประเภทจึงเป็นวิธีหลักในการจำกัดประเภทของยูเนียนอินเทอร์เฟซ
interface Cat { meow(): void }
interface Dog { bark(): void }
function isCat(pet: Cat | Dog): pet is Cat {
  return 'meow' in pet;
}

ตัวป้องกันประเภทสำหรับอ็อบเจ็กต์ที่ซับซ้อน

เขียนตัวป้องกันประเภทที่ตรวจสอบโครงสร้างของอ็อบเจ็กต์ขณะทำงาน ก่อนนำไปใช้เป็นประเภทเฉพาะ
interface User { name: string; age: number; }
function isUser(val: unknown): val is User {
  return (
    typeof val === 'object' &&
    val !== null &&
    typeof (val as any).name === 'string' &&
    typeof (val as any).age === 'number'
  );
}

ตัวป้องกันประเภทกับการยืนยันประเภท

ตัวป้องกันประเภทจะตรวจสอบขณะทำงาน ส่วนการยืนยันประเภท (as Type) ทำได้เฉพาะขณะคอมไพล์และอาจให้ข้อมูลที่ไม่จริงได้ ควรเลือกใช้ตัวป้องกันกับข้อมูลภายนอก

Array.isArray ในฐานะตัวป้องกันประเภท

Array.isArray เป็นตัวป้องกันประเภทที่มีอยู่ในตัว TypeScript เข้าใจการตรวจสอบนี้และจำกัดประเภทให้สอดคล้องกัน
function flatten(val: string | string[]): string[] {
  return Array.isArray(val) ? val : [val];
}

ตัวป้องกันประเภทเจเนอริก

ตัวป้องกันประเภทสามารถเป็นเจเนอริกเพื่อสร้างตัวตรวจสอบขณะทำงานที่นำกลับมาใช้ใหม่ได้
function isNonNull<T>(val: T | null | undefined): val is T {
  return val !== null && val !== undefined;
}
const values = [1, null, 2, undefined].filter(isNonNull);
// values: number[]

ฟังก์ชันยืนยัน

ฟังก์ชันยืนยัน (ที่ใช้ asserts) จะโยนข้อผิดพลาดหากเงื่อนไขเป็นเท็จ และจำกัดประเภทหลังจากเรียกใช้ฟังก์ชัน
function assertIsString(val: unknown): asserts val is string {
  if (typeof val !== 'string') throw new TypeError('Not a string');
}
assertIsString(input);
console.log(input.toUpperCase()); // narrowed to string

ความรับผิดชอบของตัวป้องกันประเภท

TypeScript เชื่อค่าที่ฟังก์ชันตัวป้องกันประเภทส่งกลับอย่างสมบูรณ์ หากตัวป้องกันของคุณไม่ถูกต้อง TypeScript จะไม่ตรวจพบความไม่ตรงกันขณะคอมไพล์

ตัวป้องกันประเภทใน filter และ find

ส่งตัวป้องกันประเภทให้ array.filter โดยตรงเพื่อจำกัดประเภทของผลลัพธ์
const mixed: (string | null)[] = ['a', null, 'b'];
const strings = mixed.filter((x): x is string => x !== null);
// strings: string[]

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

คำอธิบายประกอบประเภทค่าที่ส่งกลับแบบใดทำให้ฟังก์ชันเป็นตัวป้องกันประเภทของ TypeScript

ทบทวน

ตัวป้องกันประเภทที่ผู้ใช้กำหนดใช้ประเภทค่าที่ส่งกลับ `param is Type` เพื่อห่อหุ้มตรรกะการจำกัดประเภท ทำงานร่วมกับ filter/find ช่วยจำกัดประเภทอินเทอร์เฟซ และทำให้เป็นเจเนอริกได้ ฟังก์ชันยืนยันจะจำกัดประเภทโดยไม่ต้องส่งกลับค่าบูลีน

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

บทเรียน “ฟังก์ชันตรวจสอบชนิดที่ผู้ใช้กำหนด” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชันตรวจสอบชนิดที่ผู้ใช้กำหนด”

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

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

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

บทเรียน “ฟังก์ชันตรวจสอบชนิดที่ผู้ใช้กำหนด” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การทำชนิดให้แคบลงด้วย typeof และค่าความจริง
  2. การทำชนิดให้แคบลงด้วย instanceof และ in
  3. ฟังก์ชันตรวจสอบชนิดที่ผู้ใช้กำหนด
  4. ตรวจสอบความครอบคลุมทุกกรณีด้วย never
← กลับไปที่ TypeScript Academy