TypeScript extends: ein Interface oder einen Typ erweitern

interface Child extends Parent erzeugt ein neues Interface mit jedem Member von Parent plus seinen eigenen. Werte des Kindtyps lassen sich überall verwenden, wo die Eltern erwartet werden, weil sie alle deren Eigenschaften haben.

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

Dasselbe Schlüsselwort taucht in TypeScript an vier Stellen auf, mit verwandten, aber unterschiedlichen Bedeutungen:

Mehrere Interfaces erweitern

Führe mehrere Eltern nach extends auf, durch Kommas getrennt. Das Ergebnis hat die Member aller:

interface Identified {
  id: number;
}

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

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

// Post requires id, createdAt, updatedAt and title

Deklarieren zwei Eltern dieselbe Eigenschaft mit nicht identischen Typen, ist das Kind der Fehler TS2320 (Interface 'Post' cannot simultaneously extend types 'A' and 'B'), außer das Kind deklariert diese Eigenschaft neu mit einem Typ, der beiden zuweisbar ist.

Einen Typalias erweitern

Ein Alias type hat keine extends-Klausel. Du baust mit einer Intersection, &, darauf auf, die die Member beider Seiten kombiniert. Ein Interface kann einen Typalias für einen Objekttyp auch direkt erweitern, und ein Typalias kann ein Interface schneiden: Die beiden Arten lassen sich frei mischen.

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

Beide Wege verhalten sich gleich, bis Eigenschaften kollidieren: extends meldet eine widersprüchliche Eigenschaft an der Deklaration, während & sie stillschweigend zu never macht. Der Vergleich steht auf der Seite interface vs type, die Details zu & auf der Seite zu Intersection-Typen.

Eigenschaftstypen überschreiben

Ein Kind-Interface darf eine Eigenschaft der Eltern neu deklarieren, aber nur mit einem Typ, der dem der Eltern zuweisbar ist. string auf ein Literal einzuengen oder null aus einer Union zu entfernen ist erlaubt. Den Typ auf etwas Fremdes zu ändern nicht:

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

Die Regel existiert, damit ein Label weiterhin überall verwendet werden kann, wo ein Shape erwartet wird. Könnte kind eine Zahl sein, würde Code, der für Shape geschrieben ist und shape.kind.toUpperCase() aufruft, kaputtgehen.

Eigenschaften mit Omit ersetzen

Brauchst du für eine geerbte Eigenschaft wirklich einen anderen Typ, entferne sie zuerst mit Omit aus den Eltern und deklariere dann die neue. Ein häufiger Fall ist das Umwandeln von API-Daten, bei denen IDs und Datumswerte als Strings ankommen:

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"> ist { name: string }, also kollidieren die neuen id und createdAt mit nichts. Pick, Partial und die anderen Utility Types lassen sich genauso erweitern.

extends bei Klassen

class Dog extends Animal ist Klassenvererbung von JavaScript und existiert anders als extends bei Interfaces zur Laufzeit: Dog bekommt den Konstruktor, die Felder und die Methodenimplementierungen von Animal, und new Dog(...) instanceof Animal ist true. TypeScript ergänzt darauf Typprüfungen, etwa das Schlüsselwort 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

Eine Klasse kann mit extends nur eine Klasse erweitern, aber mit implements beliebig viele Interfaces implementieren. implements kopiert nichts: Es prüft nur, dass die Klasse deklariert, was das Interface verlangt. super, protected Member und override werden unter Vererbung behandelt.

extends in Generics und Conditional Types

In spitzen Klammern ist extends ein Constraint. <T extends { length: number }> akzeptiert jedes Typargument mit numerischem length und erlaubt dem Funktionsrumpf, .length zu verwenden. In einem Conditional Type fragt T extends U ? X : Y, ob T U zuweisbar ist.

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

An beiden Stellen bedeutet extends „ist zuweisbar an“, dieselbe Beziehung, die die Interface-Form prüft. Constraints werden ausführlich unter Generic Constraints behandelt, Tests auf Typebene unter Conditional Types.