TypeScript extends: הרחבת interface או type

interface Child extends Parent יוצר interface חדש עם כל האיברים של Parent ועם האיברים שלו עצמו. אפשר להשתמש בערכים מטיפוס הילד בכל מקום שבו מצופה ההורה, כי יש להם את כל המאפיינים שלו.

interface Animal {
  name: string;
  age: number;
}

interface Dog extends Animal {
  breed: string;
  bark(): string;
}

const rex: Dog = {
  name: "Rex",
  age: 4,
  breed: "collie",
  bark() {
    return `${this.name} says woof`;
  },
};

function birthday(a: Animal): number {
  return a.age + 1;
}

console.log(rex.bark());    // Rex says woof
console.log(birthday(rex)); // 5: a Dog is also an Animal

אותה מילת מפתח מופיעה ב-TypeScript בארבעה מקומות, עם משמעויות קרובות אבל שונות:

הרחבה של כמה interfaces

כתבו כמה הורים אחרי extends, מופרדים בפסיקים. לתוצאה יש את האיברים של כולם:

interface Identified {
  id: number;
}

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface Post extends Identified, Timestamped {
  title: string;
}

// Post requires id, createdAt, updatedAt and title

אם שני הורים מצהירים על אותו מאפיין עם טיפוסים שאינם זהים, הילד הוא השגיאה TS2320 (Interface 'Post' cannot simultaneously extend types 'A' and 'B'), אלא אם הילד מצהיר מחדש על המאפיין הזה עם טיפוס שניתן להשמה לשניהם.

הרחבה של type alias

ל-type alias אין פסוקית extends. בונים עליו עם intersection, &, שמשלב את האיברים של שני הצדדים. גם interface יכול להרחיב ישירות type alias של אובייקט, ו-type alias יכול ליצור intersection עם interface: שני הסוגים משתלבים בחופשיות.

type Timestamps = { createdAt: string; updatedAt: string };
type WithId = { id: number };

// type alias: extend with &
type Post = WithId & Timestamps & { title: string };

// interface: extends works on object type aliases too
interface Reply extends WithId, Timestamps {
  postId: number;
  body: string;
}

const post: Post = { id: 1, title: "Hello", createdAt: "2024-03-15", updatedAt: "2024-03-15" };
const reply: Reply = { id: 7, postId: 1, body: "Nice", createdAt: "2024-03-16", updatedAt: "2024-03-16" };

console.log(post.title, reply.body, reply.postId === post.id); // Hello Nice true

שתי הדרכים מתנהגות אותו דבר עד שיש התנגשות בין מאפיינים: extends מדווח על מאפיין מתנגש כבר בהצהרה, ואילו & הופך אותו בשקט ל-never. ההשוואה נמצאת בעמוד interface מול type, והפרטים על & נמצאים בעמוד על intersection types.

דריסה של טיפוסי מאפיינים

interface ילד יכול להצהיר מחדש על מאפיין של ההורה, אבל רק עם טיפוס שניתן להשמה לטיפוס של ההורה. מותר לצמצם string לליטרל, או להסיר null מ-union. אסור לשנות את הטיפוס למשהו שאינו קשור:

// This does not compile: kind cannot become a number
interface Shape {
  kind: string;
  color: string | null;
}

interface Circle extends Shape {
  kind: "circle"; // narrower than string: allowed
  color: string;  // narrower than string | null: allowed
  radius: number;
}

interface Label extends Shape {
  kind: number;   // not assignable to string: error
}

const c: Circle = { kind: "circle", color: "red", radius: 2 };
console.log(c);

index.ts(13,11): error TS2430: Interface 'Label' incorrectly extends interface 'Shape'.
  Types of property 'kind' are incompatible.
    Type 'number' is not assignable to type 'string'.

הכלל קיים כדי שעדיין יהיה אפשר להשתמש ב-Label בכל מקום שבו מצופה Shape. אם kind היה יכול להיות מספר, קוד שנכתב עבור Shape וקורא ל-shape.kind.toUpperCase() היה נשבר.

החלפת מאפיינים עם Omit

כשבאמת צריך טיפוס אחר למאפיין שעובר בירושה, הסירו אותו קודם מההורה עם Omit, ואז הצהירו על המאפיין החדש. מקרה נפוץ הוא המרה של נתונים מ-API, שבהם מזהים ותאריכים מגיעים כמחרוזות:

interface ApiUser {
  id: string; // the API sends ids as strings
  name: string;
  createdAt: string;
}

// Drop the properties to change, then declare them again
interface User extends Omit<ApiUser, "id" | "createdAt"> {
  id: number;
  createdAt: Date;
}

function toUser(raw: ApiUser): User {
  return { ...raw, id: Number(raw.id), createdAt: new Date(raw.createdAt) };
}

const u = toUser({ id: "42", name: "Ada", createdAt: "2024-03-15T10:30:00Z" });
console.log(u.id + 1, u.createdAt.toISOString()); // 43 2024-03-15T10:30:00.000Z

Omit<ApiUser, "id" | "createdAt"> הוא { name: string }, ולכן id ו-createdAt החדשים לא מתנגשים בשום דבר. אפשר להרחיב באותה דרך גם את Pick, את Partial ואת שאר ה-utility types.

extends עם מחלקות

class Dog extends Animal הוא ירושת מחלקות של JavaScript, ובניגוד ל-extends של interface הוא קיים בזמן ריצה: Dog מקבל את הבנאי, את השדות ואת מימושי המתודות של Animal, ו-new Dog(...) instanceof Animal הוא true. TypeScript מוסיף מעל זה בדיקות טיפוסים, כמו מילת המפתח override:

class Animal {
  constructor(public name: string) {}
  speak(): string {
    return `${this.name} makes a sound`;
  }
}

class Dog extends Animal {
  override speak(): string {
    return `${this.name} barks`;
  }
}

const pets: Animal[] = [new Animal("Generic"), new Dog("Rex")];
for (const p of pets) console.log(p.speak());
// Generic makes a sound
// Rex barks

מחלקה יכולה לעשות extends רק למחלקה אחת, אבל היא יכולה לעשות implements לכמה interfaces שרוצים. implements לא מעתיק שום דבר: הוא רק בודק שהמחלקה מצהירה על מה שה-interface דורש. super, איברים מוגנים ו-override מוסברים בעמוד על ירושה.

extends בגנריקס וב-conditional types

בתוך סוגריים משולשים, extends הוא אילוץ. <T extends { length: number }> מקבל כל ארגומנט טיפוס שיש לו length מספרי, ומאפשר לגוף הפונקציה להשתמש ב-.length. ב-conditional type, T extends U ? X : Y שואל האם T ניתן להשמה ל-U.

// Generic constraint: T must have a length property
function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

console.log(longest("apple", "fig"));    // apple
console.log(longest([1, 2], [1, 2, 3])); // [ 1, 2, 3 ]

// @ts-expect-error: Argument of type 'number' is not assignable to parameter of type '{ length: number; }'.
longest(10, 20);

// Conditional type: a type-level if/else
type IsString<T> = T extends string ? "yes" : "no";
const a: IsString<"hi"> = "yes";
const b: IsString<42> = "no";
console.log(a, b); // yes no

בשני המקומות extends אומר "ניתן להשמה ל", אותו יחס שצורת ה-interface בודקת. אילוצים מוסברים לעומק בעמוד על אילוצים גנריים, ובדיקות ברמת הטיפוסים בעמוד על conditional types.