type vs. interface: extends und Intersection

Wähle das richtige Konstrukt, um deine Objekttypen zu modellieren und zu kombinieren, ohne Code zu duplizieren.

8 Min. · 3 Fragen

Du weißt bereits, wie du Objekttypen deklarierst. Die eigentliche Frage in einem Projekt lautet: type oder interface? Und wie kombinierst du bestehende Typen, ohne Code zu duplizieren? Beginnen wir mit dem häufigsten Fall: Entitäten modellieren, die sich ähneln.

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

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

const admin: Admin = {
  id: 1,
  name: "Ada",
  permissions: ["users:write"],
};

extends schafft eine klare Beziehung: Ein Admin ist ein User mit zusätzlichen Rechten. Mit einem type-Alias erreichst du dasselbe Ergebnis über den Intersection-Operator &, der mehrere Formen zu einer einzigen verschmilzt. Das ist das perfekte Werkzeug für übergreifende Belange, etwa Zeitstempel, die auf allen deinen Entitäten vorkommen.

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

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

type StoredProduct = Product & Timestamps;

Was solltest du also wählen? Zwei Unterschiede zählen wirklich. Erstens kann nur type einer Union wie 'active' | 'archived' einen Namen geben. Zweitens verschmelzen zwei interface-Deklarationen mit demselben Namen automatisch: praktisch, um die Typen einer Bibliothek zu erweitern, gefährlich, wenn es aus Versehen passiert.

type Status = "active" | "archived";

interface Config {
  locale: string;
}

interface Config {
  debug: boolean;
}

const config: Config = { locale: "fr", debug: true };

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Du musst dem Typ 'draft' | 'published' einen Namen geben. Welches Konstrukt ist dafür nötig?
   • interface
   • type
   • Beide funktionieren
   • enum
2. Zwei Deklarationen interface Config { ... } existieren im selben Gültigkeitsbereich. Was passiert?
   • Ein sofortiger Kompilierfehler
   • Die zweite überschreibt die erste
   • Sie verschmelzen zu einem einzigen Interface
   • Die erste hat Vorrang
3. Welcher Operator kombiniert zwei Objekttyp-Aliase zu einem einzigen Typ, der die Eigenschaften beider verlangt?
   • |
   • &
   • extends