TypeScript: Interfaces vs Types – Was wählt man 2024?

Einleitung: Die ewige Debatte der TypeScript-Entwickler

Wenn Sie auch nur einmal in TypeScript geschrieben haben, sind Sie sicherlich auf die Frage gestoßen: "Wann verwende ich interface und wann type?" Diese Frage hat Tausende von Aufrufen auf Stack Overflow gesammelt und ist zu einem echten Stolperstein für Anfänger geworden. Lassen Sie uns dieses Dilemma ein für alle Mal klären.

TypeScript ist eine Erweiterung von JavaScript, die statische Typisierung hinzufügt. Und wir haben zwei Hauptwerkzeuge zur Beschreibung von Datenstrukturen: Interface und Type Alias. Auf den ersten Blick tun sie dasselbe, aber der Teufel steckt im Detail. In diesem Artikel werden wir nicht nur die Unterschiede auflisten – wir zeigen sie anhand realer Beispiele und geben klare Empfehlungen.

Was ist ein Interface?

Ein Interface ist eine Möglichkeit, die Struktur eines Objekts zu beschreiben. Es ist wie ein Bauplan für Daten: Sie sagen TypeScript, welche Eigenschaften und Methoden ein Objekt haben soll.

// Basis-Interfaceinterface User {    name: string;    age: number;    email?: string; // optionale Eigenschaft    readonly id: number; // nur lesbar}

// Verwendungconst user: User = {    name: "Anna",    age: 25,    id: 1};

Interfaces können voneinander erben, was sie ideal für die Beschreibung von Hierarchien macht:

interface Animal {    name: string;    sound(): void;}

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

// Jetzt enthält Dog alle Felder von Animal + eigeneconst myDog: Dog = {    name: "Rex",    breed: "Schäferhund",    sound() { console.log("Wuff!"); },    wagTail() { console.log("Wedelt mit dem Schwanz"); }};

Was ist ein Type Alias?

Ein Type Alias (Typ-Alias) ist ein flexibleres Werkzeug. Er kann nicht nur Objekte beschreiben, sondern auch Primitive, Vereinigungen und Schnittmengen von Typen.

// Typ für ein Primitivtype ID = string | number;

// Typ für ein Objekttype UserType = {    name: string;    age: number;};

// Typ für eine Funktiontype Greeting = (name: string) => string;

// Union Type (Vereinigung)type Status = "active" | "inactive" | "pending";

// Intersection Type (Schnittmenge)type Person = { name: string };type Employee = Person & { salary: number };

Die Haupt-Superkraft von Typen sind Union Types. Interfaces können das nicht:

// ❌ So geht es nicht mit interface// interface Status = "active" | "inactive"; // Fehler!

// ✅ Mit type – ganz einfach!type Status = "active" | "inactive" | "pending";

function processStatus(status: Status) {    switch (status) {        case "active":            console.log("Aktiv");            break;        case "inactive":            console.log("Inaktiv");            break;        case "pending":            console.log("Ausstehend");            break;    }}

Wichtige Unterschiede: Interface vs Type

Lassen Sie uns im Detail betrachten, worin sie sich in der Praxis unterscheiden.

1. Vereinigung und Schnittmenge von Typen

Type unterstützt Union (|) und Intersection (&) direkt. Interface – nur über extends.

// Union – nur typetype Success = { data: string };type Error = { error: string };type Result = Success | Error; // Möglich!

// Intersectiontype Full = Success & Error; // Möglich!

// Für interface müsste man separate Interfaces erstelleninterface IResult extends Success, Error {} // Funktioniert, aber umständlich

2. Declaration Merging (Zusammenführung von Deklarationen)

Dies ist eine einzigartige Funktion von Interfaces. Wenn Sie zwei Interfaces mit demselben Namen deklarieren, führt TypeScript sie zusammen.

// Erstes Interfaceinterface User {    name: string;}

// Zweites Interface mit demselben Nameninterface User {    age: number;}

// Ergebnis: User = { name: string; age: number; }const user: User = {