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

ข้อจำกัดเจเนอริก: การจำกัดพารามิเตอร์ชนิดให้แคบลง

ใช้ extends เพื่อบังคับให้เจเนอริกมีโครงสร้างตามข้อกำหนด

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

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

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

ทบทวนข้อจำกัด

`T extends U` จำกัด T ให้เป็นประเภทที่เป็นประเภทย่อยของ U ทำให้ TypeScript ทราบโครงสร้างของ T ภายในฟังก์ชัน
function len<T extends { length: number }>(val: T): number {
  return val.length;
}

การจำกัดให้มีเมธอดเฉพาะ

กำหนดให้ T มีเมธอดเฉพาะ โดยจำกัด T ให้เป็นอินเทอร์เฟซที่มีเมธอดนั้น
interface Stringable { toString(): string; }
function stringify<T extends Stringable>(val: T): string {
  return val.toString();
}

การอนุมานจากข้อจำกัด

ใช้ keyof ภายในข้อจำกัดเพื่อสร้างฟังก์ชันเข้าถึงที่ปลอดภัย
function pluck<T, K extends keyof T>(items: T[], key: K): T[K][] {
  return items.map(item => item[key]);
}
const names = pluck(users, 'name'); // string[]

ข้อจำกัดแบบชนิดระดับสูง (จำลอง)

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

การจำกัดให้เป็นประเภทพื้นฐาน

จำกัดพารามิเตอร์ประเภทให้เป็นประเภทพื้นฐานเฉพาะ เพื่อใช้กับฟังก์ชันเฉพาะทาง
type Primitive = string | number | boolean | bigint | symbol | null | undefined;
function isPrimitive<T extends Primitive>(val: T): true { return true; }

ข้อจำกัดแบบเรียกซ้ำ

ข้อจำกัดสามารถอ้างอิงตัวเองเพื่อใช้กับรูปแบบแบบเรียกซ้ำได้
interface Comparable<T> { compareTo(other: T): number; }
function sort<T extends Comparable<T>>(items: T[]): T[] {
  return [...items].sort((a, b) => a.compareTo(b));
}

ข้อจำกัดพร้อมค่าเริ่มต้น

พารามิเตอร์ประเภทสามารถมีทั้งข้อจำกัดและค่าเริ่มต้นได้ โดยค่าเริ่มต้นต้องเป็นไปตามข้อจำกัด
function process<T extends object = Record<string, unknown>>(data: T): void {
  console.log(Object.keys(data));
}

T extends Record<string, unknown>

จำกัดให้เป็นประเภทระเบียนเพื่อเปิดใช้การเข้าถึงคุณสมบัติแบบไดนามิก
function getValue<T extends Record<string, unknown>>(obj: T, key: string): unknown {
  return obj[key];
}

การอนุมานข้อจำกัดในประเภทค่าที่ส่งคืน

เมื่อ T มีข้อจำกัด TypeScript จะใช้ข้อจำกัดนั้นเพื่อกำหนดการดำเนินการที่ถูกต้องกับประเภทค่าที่ส่งคืน
function firstKey<T extends object>(obj: T): keyof T {
  return Object.keys(obj)[0] as keyof T;
}

เครื่องมือ NoInfer (TS 5.4)

TypeScript 5.4 เพิ่ม `NoInfer` เพื่อป้องกันไม่ให้อนุมานพารามิเตอร์ประเภทจากตำแหน่งอาร์กิวเมนต์เฉพาะ
function createState<T>(initial: T, fallback: NoInfer<T>): T {
  return initial ?? fallback;
}

ตรวจสอบความเข้าใจ

`T extends { length: number }` เพิ่มอะไรให้กับ T ภายในฟังก์ชันเจเนอริก

สรุป

ข้อจำกัดระดับสูงช่วยจำกัดประเภทเจเนอริกให้มีโครงสร้าง เมธอด หรือยูเนียนของประเภทพื้นฐานที่เฉพาะเจาะจง เมื่อนำไปใช้ร่วมกับ keyof รูปแบบแบบเรียกซ้ำ และค่าเริ่มต้น จะช่วยสร้างเครื่องมือที่ปลอดภัยด้านประเภทและมีประสิทธิภาพ

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

บทเรียน “ข้อจำกัดเจเนอริก: การจำกัดพารามิเตอร์ชนิดให้แคบลง” ฟรีหรือไม่

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

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

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

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

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

บทเรียน “ข้อจำกัดเจเนอริก: การจำกัดพารามิเตอร์ชนิดให้แคบลง” ใช้เวลานานแค่ไหน

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

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

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

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

  1. keyof และชนิดการเข้าถึงแบบดัชนี
  2. ข้อจำกัดเจเนอริก: การจำกัดพารามิเตอร์ชนิดให้แคบลง
  3. ชนิดแบบมีเงื่อนไข: T extends U ? X : Y
  4. ชนิดแบบมีเงื่อนไขชนิดกระจาย
← กลับไปที่ TypeScript Academy