Typ-Aliase und Interfaces

Willkommen in der nächsten Lektion! In dieser Lektion lernen Sie Typ-Aliase und Interfaces in TypeScript kennen, einschließlich ihrer Unterschiede, Gemeinsamkeiten und der Situationen, in denen die jeweilige Variante verwendet wird. Beginnen wir!

Was sind Typ-Aliase?

Mit einem Typ-Alias können Sie einen benutzerdefinierten Namen für einen Typ definieren. Er kann primitive Typen, Objekte oder sogar Funktionssignaturen darstellen.

Beispiel:

Aufgabe: Erstellen Sie einen Typ-Alias für ein Objekt, das ein Buch darstellt, und verwenden Sie ihn, um eine Variable zu definieren.

type Point = {
  x: number;
  y: number;
};

let point: Point = { x: 10, y: 20 };
console.log(point); 
// Output: { x: 10, y: 20 }

Was sind Interfaces?

Ein Interface definiert die Struktur eines Objekts einschließlich seiner Eigenschaften und Methoden. Es wird häufig verwendet, um Konsistenz und Typsicherheit für Objekte zu gewährleisten.

Beispiel:

Aufgabe: Erstellen Sie ein Interface für ein Benutzerprofil und verwenden Sie es, um eine Variable zu definieren.

interface Point {
  x: number;
  y: number;
}

let point: Point = { x: 5, y: 15 };
console.log(point); 
// Output: { x: 5, y: 15 }

Typ-Aliase und Interfaces: Gemeinsamkeiten

Typ-Aliase und Interfaces haben einige Gemeinsamkeiten:

• Beide können die Struktur eines Objekts beschreiben.
• Beide können zum Definieren von Funktionstypen verwendet werden.
• Beide unterstützen die Erweiterung anderer Typen.

Beispiel: Ein Funktionstyp:

Aufgabe: Definieren Sie sowohl einen Typ-Alias als auch ein Interface für eine Funktion und verwenden Sie beide.

type Add = (a: number, b: number) => number;
interface Subtract {
  (a: number, b: number): number;
}

let add: Add = (x, y) => x + y;
let subtract: Subtract = (x, y) => x - y;

console.log(add(5, 3)); 
// Output: 8
console.log(subtract(5, 3)); 
// Output: 2

Typ-Aliase und Interfaces: Unterschiede

Hier sind die wichtigsten Unterschiede:

• Interfaces: Können zusammengeführt werden (Declaration Merging).
• Typ-Aliase: Können nicht zusammengeführt werden.
• Typ-Aliase: Können Union- und Intersection-Typen definieren.
• Interfaces: Sind in erster Linie für Objektstrukturen vorgesehen.

Beispiel: Union-Typen mit Typ-Aliases:

Aufgabe: Verwenden Sie einen Typ-Alias, um einen Union-Typ zu definieren, und weisen Sie einer Variable unterschiedliche Werte zu.

type StringOrNumber = string | number;

let value: StringOrNumber = "Hello";
value = 42;
// value = true; 
// Error: Type 'true' is not assignable to type 'StringOrNumber'.

Typen und Interfaces erweitern

Sowohl Typ-Aliase als auch Interfaces können andere Typen erweitern:

• Interfaces: Verwenden das Schlüsselwort extends.
• Typ-Aliase: Verwenden Schnittmengen (&).

Beispiel:

Aufgabe: Erweitern Sie einen Typ-Alias und ein Interface, um neue Typen zu erstellen.

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

type Bird = Animal & { canFly: boolean };

let myDog: Dog = { name: "Buddy", breed: "Golden Retriever" };
let myBird: Bird = { name: "Parrot", canFly: true };

console.log(myDog, myBird);

Zusammenführen von Deklarationen

Interfaces unterstützen das Zusammenführen von Deklarationen. Dabei werden mehrere Interface-Deklarationen mit demselben Namen zu einem einzigen Interface zusammengeführt. Typ-Aliase unterstützen diese Funktion nicht.

Beispiel:

Aufgabe: Erstellen Sie zwei Interface-Deklarationen mit demselben Namen und testen Sie das Zusammenführen von Deklarationen.

interface Person {
  name: string;
}

interface Person {
  age: number;
}

let person: Person = { name: "Alice", age: 30 };
console.log(person); 
// Output: { name: "Alice", age: 30 }

Wann welches verwendet werden sollte

Hier sind einige Richtlinien:

• Verwenden Sie Interfaces, um Objektstrukturen zu definieren und wenn das Zusammenführen von Deklarationen erforderlich ist.
• Verwenden Sie Typ-Aliase für Union- und Intersection-Typen oder zum Definieren von Funktionstypen.

Tipp: Verwenden Sie die Variante, die am besten zu Ihrem Anwendungsfall passt, um Klarheit und Konsistenz zu gewährleisten!

Sehr gut gemacht!

Herzlichen Glückwunsch! Sie haben die Gemeinsamkeiten und Unterschiede zwischen Typ-Aliases und Interfaces in TypeScript kennengelernt und erfahren, wann welche Variante verwendet wird. In der nächsten Lektion beschäftigen wir uns mit fortgeschrittenen TypeScript-Features wie bedingten Typen. Programmieren wir weiter!