Kodokon kodokon.com

type vs interface: extends และ intersection

เลือกโครงสร้างที่เหมาะสมเพื่อสร้างแบบจำลองและประกอบ object type ของคุณโดยไม่ต้องเขียนโค้ดซ้ำ

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

เปิดบทเรียนนี้ใน Kodokon

คุณรู้วิธีประกาศ object type อยู่แล้ว คำถามที่แท้จริงในโปรเจกต์คือการเลือกระหว่าง type และ interface แล้วประกอบ type ที่มีอยู่เข้าด้วยกันโดยไม่เขียนโค้ดซ้ำ มาเริ่มจากสถานการณ์ที่พบบ่อยที่สุด: การสร้างแบบจำลองของ entity ที่หน้าตาคล้ายกัน

TYPESCRIPT
interface User {
  id: number;
  name: string;
}

interface Admin extends User {
  permissions: string[];
}

const admin: Admin = {
  id: 1,
  name: "Ada",
  permissions: ["users:write"],
};
การขยาย interface ด้วย extends

extends สร้างความสัมพันธ์ที่ชัดเจน: Admin คือ User ที่มีอำนาจเพิ่มขึ้น เมื่อใช้ type alias คุณจะได้ผลลัพธ์เดียวกันผ่านตัวดำเนินการ intersection & ซึ่งรวมหลายรูปทรงเข้าเป็นหนึ่งเดียว มันเป็นเครื่องมือที่สมบูรณ์แบบสำหรับความกังวลที่ตัดข้ามกัน (cross-cutting concerns) เช่น timestamp ที่ปรากฏบน entity ทุกตัวของคุณ

TYPESCRIPT
type Timestamps = {
  createdAt: Date;
  updatedAt: Date;
};

type Product = {
  id: number;
  label: string;
};

type StoredProduct = Product & Timestamps;
การประกอบ type ด้วย intersection &

แล้วควรเลือกอันไหนดี? มีความแตกต่างสองข้อที่สำคัญจริง ๆ ข้อแรก มีแค่ type เท่านั้นที่ตั้งชื่อ union อย่าง 'active' | 'archived' ได้ ข้อสอง การประกาศ interface สองครั้งที่ใช้ชื่อเดียวกันจะรวม (merge) เข้าด้วยกันโดยอัตโนมัติ: สะดวกสำหรับการเสริม type ของไลบรารี แต่อันตรายเมื่อมันเกิดขึ้นโดยบังเอิญ

TYPESCRIPT
type Status = "active" | "archived";

interface Config {
  locale: string;
}

interface Config {
  debug: boolean;
}

const config: Config = { locale: "fr", debug: true };
union เป็นเรื่องของ type เท่านั้น ส่วนการประกาศ interface จะรวมกัน

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

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

  1. คุณต้องตั้งชื่อให้กับ type 'draft' | 'published' โครงสร้างใดที่จำเป็นต้องใช้?
    • interface
    • type
    • ใช้ได้ทั้งสองอย่าง
    • enum
  2. มีการประกาศ interface Config { ... } สองครั้งอยู่ในสโคปเดียวกัน จะเกิดอะไรขึ้น?
    • เกิด compile error ทันที
    • อันที่สองเขียนทับอันแรก
    • ทั้งสองรวมกันเป็น interface เดียว
    • อันแรกมีความสำคัญเหนือกว่า
  3. ตัวดำเนินการใดที่รวม object type alias สองตัวเข้าเป็น type เดียวที่ต้องมีคุณสมบัติของทั้งสองตัว?
    • |
    • &
    • extends