Type, oder Interface, Das ist die Frage (in TypeScript)

In TypeScript werden sowohl type als auch interface verwendet, um Typen zu definieren, und in vielen Fällen sind sie austauschbar. Sie haben jedoch einige wesentliche Unterschiede und spezifische Anwendungsfälle. Bevor wir uns mit den Unterschieden zwischen type und interface befassen, wollen wir uns zunächst ihre grundlegende Verwendung ansehen.

1. Grundlegende Verwendung: Definieren von Objekttypen mit type und interface

// Verwenden von interface
interface User {
  name: string;
  age: number;
}

// Verwenden von type
type UserType = {
  name: string;
  age: number;
};

const user1: User = { name: 'Alice', age: 25 };
const user2: UserType = { name: 'Bob', age: 30 };

In diesem Beispiel können sowohl interface als auch type einen Objekttyp definieren, und es gibt fast keinen Unterschied in der Verwendung.

2. Erweiterung (Extend)

2.1 Erweitern von interface

interface kann durch Vererbung erweitert werden:

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

interface Admin extends User {
  role: string;
}

const admin: Admin = {
  name: 'Alice',
  age: 30,
  role: 'Administrator',
};

2.2 Erweitern von type

type kann durch Schnittmengentypen erweitert werden:

type UserType = {
  name: string;
  age: number;
};

type AdminType = UserType & {
  role: string;
};

const adminType: AdminType = {
  name: 'Bob',
  age: 35,
  role: 'Admin',
};

Unterschied:

• interface verwendet das Schlüsselwort extends für die Vererbung.
• type verwendet & (Schnittmengentypen) zur Erweiterung.

3. Deklarationsverschmelzung

3.1 Deklarationsverschmelzung mit interface

interface erlaubt mehrere Deklarationen mit dem gleichen Namen. TypeScript wird ihre Member automatisch zusammenführen.

interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = { name: 'Alice', age: 25 }; // Die zusammengeführte User-Schnittstelle enthält sowohl Name- als auch Alterseigenschaften.

3.2 type unterstützt keine Deklarationsverschmelzung

type erlaubt keine doppelten Deklarationen, und dies führt zu einem Fehler.

type UserType = {
  name: string;
};

// Die erneute Deklaration desselben Typs führt zu einem Fehler
type UserType = {
  age: number; // Fehler: Doppelter Bezeichner 'UserType'.
};

Unterschied:

• interface unterstützt die Deklarationsverschmelzung, wodurch mehrere Deklarationen kombiniert werden können.
• type unterstützt keine Deklarationsverschmelzung.

4. Union-Typen und Schnittmengentypen

4.1 type unterstützt Union- und Schnittmengentypen

type unterstützt die Definition von Union- und Schnittmengentypen, was interface nicht tut.

// Union-Typ
type Status = 'success' | 'error' | 'loading';

// Schnittmengentyp
type Name = { name: string };
type Age = { age: number };
type Person = Name & Age;

const person: Person = { name: 'Alice', age: 25 };

4.2 interface unterstützt keine Union-Typen

interface kann Union-Typen nicht direkt definieren.

// Nicht unterstützt
interface Status = "success" | "error" | "loading"; // Fehler

Unterschied:

• type unterstützt Union- und Schnittmengentypen und ist daher flexibler bei der Kombination mehrerer Typen.
• interface kann keine Union-Typen definieren, kann aber Objekttypen erweitern.

5. Typ-Alias

type kann Aliase für verschiedene Typen definieren, einschließlich primitiver Typen, Tupel, Union-Typen usw.

// Definieren grundlegender Typ-Alias
type ID = number | string;

// Definieren eines Tupel-Typs
type Point = [number, number];

const id: ID = 123;
const point: Point = [10, 20];

interface hingegen kann nur Objekttypen definieren.

6. Implementierung (Implements) und Erweiterung (Extends)

6.1 interface für die Klassenimplementierung

interface kann die Struktur einer Klasse einschränken.

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

class Person implements User {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

6.2 type kann auch Klassen einschränken

Obwohl interface häufig für diesen Zweck verwendet wird, kann type eine ähnliche Funktionalität erreichen.

type UserType = {
  name: string;
  age: number;
};

class PersonType implements UserType {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

Unterschied:

• interface wird aufgrund seiner Fähigkeit, Deklarationen zusammenzuführen und Typen auf natürlichere Weise zu erweitern, häufiger im Klassendesign verwendet.
• type kann auch Klassen einschränken, eignet sich aber besser für die Definition von Unions und komplexen Typzusammensetzungen.

7. Interoperabilität

7.1 interface und type können gemischt werden

interface und type können in der Praxis kombiniert werden. So kann beispielsweise eine interface einen type erweitern und umgekehrt.

type Name = { name: string };

interface User extends Name {
  age: number;
}

const user: User = { name: 'Alice', age: 25 };

7.2 type kann interface erweitern

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

type Admin = User & {
  role: string;
};

const admin: Admin = { name: 'Bob', age: 35, role: 'Admin' };

Unterschied:

• interface kann type erweitern und type kann interface erweitern, wodurch sie flexibel kombiniert werden können.

8. Ausdrücken komplexer Typen

8.1 type bietet eine größere Ausdruckskraft

Da type Union-Typen, Schnittmengentypen und Typ-Alias unterstützt, ist es flexibler bei der Definition komplexer Typzusammensetzungen.

type ComplexType = string | number | { name: string };

const value1: ComplexType = 'Hello'; // Gültig
const value2: ComplexType = 123; // Gültig
const value3: ComplexType = { name: 'Alice' }; // Gültig

8.2 interface ist besser für Objektstrukturen

interface konzentriert sich auf die Beschreibung von Objektstrukturen und ist weniger geeignet für Union- oder komplexe Typkombinationen.

9. Zusammenfassung der Anwendungsfälle

Wann interface verwenden:

• Definieren von Objekttypen, insbesondere im objektorientierten Design.
• Einschränken von Klassen mit implements.
• Szenarien, die eine Deklarationsverschmelzung erfordern (z. B. Typdefinitionen von Drittanbieterbibliotheken).

Wann type verwenden:

• Definieren von Union-Typen, Schnittmengentypen und anderen komplexen Zusammensetzungen.
• Erstellen von Aliasen für primitive Typen und Tupel.
• Szenarien, die mehr Flexibilität bei der Kombination von Typen erfordern.

Fazit

interface

• Definieren von Objekttypen: ✅
• Alias für grundlegende Typen: ❌
• Deklarationsverschmelzung: ✅
• Erweiterung: extends-Vererbung
• Union-Typen: ❌
• Schnittmengentypen: ❌
• Klassenimplementierung: ✅
• Ausdrucksfähigkeit: Geeignet für Objektstrukturdefinitionen
• Häufiger Anwendungsfall: Objektorientiertes Design, Kombinieren von Klassen mit Schnittstellen

type

• Definieren von Objekttypen: ✅
• Alias für grundlegende Typen: ✅
• Deklarationsverschmelzung: ❌
• Erweiterung: &-Schnittmengentypen
• Union-Typen: ✅
• Schnittmengentypen: ✅
• Klassenimplementierung: ✅ (aber weniger verbreitet)
• Ausdrucksfähigkeit: Geeignet für komplexe Typzusammensetzungen
• Häufiger Anwendungsfall: Union-Typen, komplexe Typdefinitionen, Typ-Alias usw.

Insgesamt ist interface besser für die objektorientierte Programmierung geeignet, insbesondere im Klassendesign und in der Vererbung. Andererseits ist type flexibler und ideal für Szenarien, die komplexere Typzusammensetzungen und Typ-Alias erfordern. In den meisten Projekten können interface und type sich ergänzend verwendet werden.

---

Wir sind Leapcell, Ihre erste Wahl für das Hosting von Node.js-Projekten.

Leapcell ist die Serverless-Plattform der nächsten Generation für Webhosting, asynchrone Aufgaben und Redis:

Multi-Sprachen-Unterstützung

• Entwickeln Sie mit Node.js, Python, Go oder Rust.

Stellen Sie unbegrenzt Projekte kostenlos bereit

• Zahlen Sie nur für die Nutzung - keine Anfragen, keine Gebühren.

Unschlagbare Kosteneffizienz

• Pay-as-you-go ohne Leerlaufgebühren.
• Beispiel: 25 US-Dollar unterstützen 6,94 Millionen Anfragen bei einer durchschnittlichen Antwortzeit von 60 ms.

Optimierte Entwicklererfahrung

• Intuitive Benutzeroberfläche für mühelose Einrichtung.
• Vollautomatische CI/CD-Pipelines und GitOps-Integration.
• Echtzeitmetriken und -protokollierung für umsetzbare Erkenntnisse.

Mühelose Skalierbarkeit und hohe Leistung

• Automatische Skalierung zur einfachen Bewältigung hoher Parallelität.
• Null Betriebsaufwand - konzentrieren Sie sich einfach auf das Bauen.

Weitere Informationen finden Sie in der Dokumentation!

Folgen Sie uns auf X: @LeapcellHQ