Generic: ฟังก์ชันและ type แบบ generic อย่างง่าย

เขียนฟังก์ชันและ type ที่นำกลับมาใช้ซ้ำได้ ซึ่งคงความแม่นยำของ type ไว้อย่างเต็มที่ในทุกการเรียกใช้

9 นาที · 3 คำถาม

คุณใช้ generic อยู่แล้วโดยไม่รู้ตัว: string[], Promise<number>... ถึงเวลาเขียนของคุณเองแล้ว generic แนะนำ type parameter ซึ่งเป็นตัวแปรที่ถูกแทนที่ด้วย type ที่เป็นรูปธรรมในแต่ละการใช้งาน เป้าหมายคือ: เขียนตรรกะเพียงครั้งเดียว โดยไม่เสียสละความแม่นยำของ type

function first<T>(items: T[]): T | undefined {
  return items[0];
}

const n = first([10, 20, 30]);
const s = first(["a", "b"]);

สังเกตว่าคุณไม่ได้ระบุอะไรเลยที่จุดเรียกใช้: TypeScript อนุมาน (infer) T จากอาร์กิวเมนต์ generic ที่ไม่มีข้อจำกัดจะรับอะไรก็ได้ แต่ฟังก์ชันมักจะต้องการการรับประกันขั้นต่ำเกี่ยวกับข้อมูลของมัน คีย์เวิร์ด extends กำหนดรูปทรงขั้นต่ำให้กับ T

interface HasId {
  id: number;
}

function findById<T extends HasId>(
  items: T[],
  id: number
): T | undefined {
  return items.find((item) => item.id === id);
}

type เองก็เป็น generic ได้ นี่คือเรื่องปกติในโค้ดเครือข่าย: โครงสร้างของ response นั้นคงที่ มีแค่เนื้อหาของ data เท่านั้นที่แปรผัน type เดียวจึงอธิบาย response ของ API ทั้งหมดของคุณได้

interface ApiResponse<T> {
  ok: boolean;
  data: T;
}

type UserResponse = ApiResponse<{ name: string }>;

const res: UserResponse = {
  ok: true,
  data: { name: "Ada" },
};

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. ใน function first<T>(items: T[]): T | undefined นั้น T แทนอะไร?
   • type ที่เป็นรูปธรรมซึ่งกำหนดไว้ครั้งเดียวและถาวร
   • type parameter ที่ถูกแทนที่ในแต่ละการเรียกใช้
   • type unknown
   • รูปย่อของ any
2. ข้อจำกัด <T extends HasId> รับประกันอะไร?
   • T คือ type HasId พอดี
   • T มีคุณสมบัติของ HasId เป็นอย่างน้อย
   • T สืบทอดมาจากคลาส HasId
3. คุณเรียก first([10, 20, 30]) โดยไม่ระบุ type แล้ว T คืออะไร?
   • any
   • unknown
   • number
   • 10 | 20 | 30