extends w TypeScript: rozszerzanie interfejsu i typu

interface Child extends Parent tworzy nowy interfejs ze wszystkimi składowymi Parent oraz własnymi. Wartości typu potomnego można używać wszędzie tam, gdzie oczekiwany jest rodzic, bo mają wszystkie jego właściwości.

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

To samo słowo kluczowe pojawia się w TypeScript w czterech miejscach, z powiązanymi, ale różnymi znaczeniami:

Rozszerzanie kilku interfejsów

Wypisz kilku rodziców po extends, oddzielając ich przecinkami. Wynik ma składowe ich wszystkich:

interface Identified {
  id: number;
}

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

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

// Post requires id, createdAt, updatedAt and title

Jeśli dwaj rodzice deklarują tę samą właściwość z typami, które nie są identyczne, interfejs potomny zgłasza błąd TS2320 (Interface 'Post' cannot simultaneously extend types 'A' and 'B'), chyba że sam ponownie zadeklaruje tę właściwość z typem, który da się przypisać do obu.

Rozszerzanie aliasu typu

Alias type nie ma klauzuli extends. Budujesz na nim przez przecięcie, &, które łączy składowe obu stron. Interfejs może też bezpośrednio rozszerzyć alias typu obiektowego, a alias typu może tworzyć przecięcie z interfejsem: oba rodzaje swobodnie się mieszają.

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

Obie drogi działają tak samo, dopóki właściwości nie wchodzą w konflikt: extends zgłasza konfliktową właściwość przy deklaracji, a & po cichu zamienia ją na never. Porównanie znajdziesz na stronie interface a type, a szczegóły & na stronie o typach przecięcia.

Nadpisywanie typów właściwości

Interfejs potomny może ponownie zadeklarować właściwość rodzica, ale tylko z typem, który da się przypisać do typu rodzica. Zawężenie string do literału albo usunięcie null z unii jest dozwolone. Zmiana typu na coś niezwiązanego nie jest:

// 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'.

Ta reguła istnieje po to, aby Label nadal dało się użyć wszędzie, gdzie oczekiwany jest Shape. Gdyby kind mogło być liczbą, kod napisany dla Shape, który wywołuje shape.kind.toUpperCase(), przestałby działać.

Podmiana właściwości przez Omit

Gdy naprawdę potrzebujesz innego typu dla odziedziczonej właściwości, najpierw usuń ją z rodzica przez Omit, a potem zadeklaruj nową. Typowy przypadek to konwersja danych z API, w których identyfikatory i daty przychodzą jako napisy:

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"> to { name: string }, więc nowe id i createdAt z niczym nie kolidują. Pick, Partial i pozostałe utility types można rozszerzać w ten sam sposób.

extends w klasach

class Dog extends Animal to dziedziczenie klas z JavaScriptu i w odróżnieniu od extends w interfejsach istnieje w czasie wykonania: Dog dostaje konstruktor, pola i implementacje metod Animal, a new Dog(...) instanceof Animal daje true. TypeScript dokłada do tego sprawdzanie typów, na przykład słowo kluczowe 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

Klasa może użyć extends tylko z jedną klasą, ale implements z dowolną liczbą interfejsów. implements niczego nie kopiuje: tylko sprawdza, czy klasa deklaruje to, czego wymaga interfejs. super, składowe chronione i override opisuje strona o dziedziczeniu.

extends w generykach i conditional types

W nawiasach ostrych extends jest ograniczeniem. <T extends { length: number }> przyjmuje każdy argument typu, który ma liczbowe length, i pozwala ciału funkcji używać .length. W conditional type T extends U ? X : Y pyta, czy T da się przypisać do 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

W obu miejscach extends znaczy „da się przypisać do”, czyli tę samą relację, którą sprawdza forma z interfejsami. Ograniczenia opisuje dokładnie strona o ograniczeniach generycznych, a testy na poziomie typów strona o conditional types.