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

ฟังก์ชันเจเนอริกและข้อจำกัด (extends, พารามิเตอร์ค่าเริ่มต้น)

สร้างฟังก์ชันเจเนอริก เพิ่มข้อจำกัดด้วย extends และใช้พารามิเตอร์ชนิดข้อมูลเริ่มต้นเพื่อสร้าง API ที่ใช้งานสะดวก

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

บทนำ

เป้าหมาย: ทำให้ฟังก์ชันนำกลับมาใช้ซ้ำได้และปลอดภัยด้านชนิดด้วยชนิดเจเนริก คุณจะกำหนดพารามิเตอร์ชนิด เพิ่มข้อจำกัดด้วย การขยาย และตั้งพารามิเตอร์ชนิดเริ่มต้นเพื่อ DX ที่ดียิ่งขึ้น

เจเนริกเอกลักษณ์

กำหนดพารามิเตอร์ชนิด <T> คอมไพเลอร์อนุมาน T จากอาร์กิวเมนต์ ดังนั้นผู้เรียกใช้จึงแทบไม่ต้องระบุชนิดด้วยตนเอง

function identity<T>(x: T): T {
  return x;
}

const a = identity(42);    // T inferred as number
const b = identity("ts"); // T inferred as string
console.log(a, b);

ข้อจำกัดด้วยการขยาย

ใช้การขยายเพื่อกำหนดให้ต้องมีโครงสร้างบางอย่าง เช่น id โดย T ยังมีเขตข้อมูลเพิ่มเติมได้จากการกำหนดชนิดตามโครงสร้าง

function getId<T extends { id: number }>(item: T): number {
  return item.id;
}

getId({ id: 1, name: "Ada" }); // OK (has id)
// getId({ name: "Lin" });    // Error: missing id

ข้อจำกัดด้วย keyof

จำกัด K ด้วย keyof T เพื่ออนุญาตเฉพาะชื่อคุณสมบัติจาก T เท่านั้น ชนิดค่าที่ส่งคืนคือชนิดของคุณสมบัติ T[K]

function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { id: 7, name: "Neo" };
const v1 = pluck(user, "name"); // string
const v2 = pluck(user, "id");   // number
console.log(v1, v2);

พารามิเตอร์ชนิดเริ่มต้น

พารามิเตอร์ชนิดเริ่มต้นช่วยลดโค้ดประกอบที่ไม่จำเป็น ผู้เรียกใช้สามารถละเว้น <T> ในกรณีทั่วไป แต่ยังเปลี่ยนค่าได้เมื่อจำเป็น

interface Box<T = string> {
  value: T;
}

const aBox: Box = { value: "hi" };       // T defaults to string
const nBox: Box<number> = { value: 123 }; // explicit override
console.log(aBox.value, nBox.value);

เคล็ดลับ

เคล็ดลับ:

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

ตรวจสอบข้อจำกัด

ตรวจสอบอย่างรวดเร็ว: T extends { id: number } รับประกันอะไร

สรุปทบทวน

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. ฟังก์ชันเจเนอริกและข้อจำกัด (extends, พารามิเตอร์ค่าเริ่มต้น)
  2. Partial, Readonly, Record, Pick และ Omit
  3. ชนิดข้อมูล keyof และการเข้าถึงด้วยดัชนี (เบื้องต้น)
← กลับไปที่ TypeScript Academy