TypeScript - Schnittstellen erweitern

Hallo, zukünftige Codingsuperstars! Heute tauchen wir in die aufregende Welt der TypeScript-Schnittstellen ein und lernen, wie man sie erweitert. Bis zum Ende dieser Lektion werdet ihr starke, flexible Schnittstellen wie ein Profi erstellen. Also, holt euch eure Lieblingsgetränke, settleert euch bequem und lasst uns unsere Reise beginnen!

Syntax

Bevor wir ins Detail gehen, lassen Sie uns mit den Grundlagen beginnen. In TypeScript ist das Erweitern einer Schnittstelle so einfach wie das Verwenden des Keywords extends. Hier ist die allgemeine Syntax:

interface KindSchnittstelle extends ElterSchnittstelle {
// Zusätzliche Eigenschaften oder Methoden
}

Denkt daran wie bei der Vererbung in einer königlichen Familie. Die Kind-Schnittstelle "erbt" alle Eigenschaften und Methoden der Elter-Schnittstelle und kann auch ihre eigenen einzigartigen Funktionen hinzufügen.

Erweiterung einer einzigen Schnittstelle

Lassen Sie uns mit einem einfachen Beispiel beginnen. Stellen wir uns ein Spiel über magische Kreaturen vor. Wir beginnen mit einer grundlegenden Creature-Schnittstelle:

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

Nun, sagen wir, wir möchten eine besondere Art von Kreatur erstellen - einen Drachen! Wir können die Creature-Schnittstelle erweitern, um eine Dragon-Schnittstelle zu erstellen:

interface Dragon extends Creature {
breatheFire: () => void;
wingspan: number;
}

In diesem Beispiel erbt Dragon die name und age Eigenschaften von Creature und fügt seine eigenen breatheFire-Methode und wingspan-Eigenschaft hinzu.

Sehen wir uns an, wie wir das verwenden können:

const smaug: Dragon = {
name: "Smaug",
age: 1000,
wingspan: 200,
breatheFire: () => console.log("Brüll! ?")
};

console.log(smaug.name);  // Ausgabe: Smaug
smaug.breatheFire();  // Ausgabe: Brüll! ?

Wie ihr sehen könnt, hat smaug alle Eigenschaften einer Creature, plus die zusätzlichen drachenartigen Funktionen.

Erweiterung mehrerer Schnittstellen

Was ist, wenn unser Drache nicht nur eine Kreatur ist, sondern auch ein Schatzsucher? In TypeScript können wir mehrere Schnittstellen erweitern! Lassen Sie uns eine TreasureKeeper-Schnittstelle erstellen und beide erweitern:

interface TreasureKeeper {
treasureCount: number;
addTreasure: (item: string) => void;
}

interface DragonLord extends Creature, TreasureKeeper {
breatheFire: () => void;
wingspan: number;
}

Jetzt ist unser DragonLord eine Kreatur, die sowohl Feuer atmen als auch Schätze sammeln kann. Cool, oder?

const falkor: DragonLord = {
name: "Falkor",
age: 500,
wingspan: 150,
treasureCount: 1000,
breatheFire: () => console.log("Whoosh! ?"),
addTreasure: (item) => console.log(`Hinzugefügt ${item} zum Haufen!`)
};

falkor.addTreasure("Goldene Krone");  // Ausgabe: Hinzugefügt Goldene Krone zum Haufen!

Verbesserung einer vorhandenen Schnittstelle

Manchmal möchte man zusätzliche Eigenschaften zu einer vorhandenen Schnittstelle hinzufügen. TypeScript ermöglicht dies, indem man die Schnittstelle erneut mit den neuen Eigenschaften deklariert:

interface Creature {
species: string;
}

const unicorn: Creature = {
name: "Sparkles",
age: 100,
species: "Unicorn"
};

Jetzt hat Creature die Eigenschaften name, age und species. Diese Technik wird als "Deklarationszusammenführung" bezeichnet.

Erstellung von kompositorischen Schnittstellen

Man kann auch neue Schnittstellen erstellen, indem man vorhandene mit Hilfe von Intersection-Typen kombiniert:

interface Flyer {
fly: () => void;
}

interface Swimmer {
swim: () => void;
}

type FlyingFish = Flyer & Swimmer;

const nemo: FlyingFish = {
fly: () => console.log("Ich fliege! ?✈️"),
swim: () => console.log("Immer weiter schwimmen! ?‍♂️")
};

nemo.fly();  // Ausgabe: Ich fliege! ?✈️
nemo.swim();  // Ausgabe: Immer weiter schwimmen! ?‍♂️

Überschreiben von Eigenschaften und Methoden

Beim Erweitern von Schnittstellen können Sie Eigenschaften und Methoden der Elter-Schnittstelle überschreiben. Dies ist nützlich, wenn Sie eine spezifischere Eigenschaft oder Methode in der Kind-Schnittstelle möchten:

interface Animal {
makeSound: () => void;
}

interface Cat extends Animal {
makeSound: () => string;  // Spezifischere Rückgabetype
}

const kitty: Cat = {
makeSound: () => "Miau!"
};

console.log(kitty.makeSound());  // Ausgabe: Miau!

In diesem Beispiel haben wir die makeSound-Methode überschrieben, um eine Zeichenkette zurückzugeben anstatt void.

Hier ist eine Tabelle, die die Methoden zusammenfasst, die wir behandelt haben:

Methode	Beschreibung
Erweiterung einer einzigen Schnittstelle	Verwenden Sie das extends-Keyword, um von einer Schnittstelle zu erben
Erweiterung mehrerer Schnittstellen	Verwenden Sie extends mit komma-getrennten Schnittstellen
Verbesserung einer vorhandenen Schnittstelle	Deklarieren Sie die Schnittstelle erneut mit neuen Eigenschaften
Erstellung von kompositorischen Schnittstellen	Verwenden Sie Intersection-Typen (&), um Schnittstellen zu kombinieren
Überschreiben von Eigenschaften und Methoden	Definieren Sie Eigenschaften oder Methoden neu in der Kind-Schnittstelle

Und da habt ihr es, Leute! Ihr habt eure TypeScript-Fähigkeiten durch das Beherrschen der Schnittstellen-Erweiterung verbessert. Denkt daran, Schnittstellen sind wie LEGO-Steine - ihr könnt sie auf unzählige Weisen kombinieren, um komplexe, typsichere Strukturen in eurem Code zu erstellen.

Während ihr eure Programmierreise fortsetzt, werdet ihr feststellen, dass diese Techniken euch helfen, flexiblere, wiederverwendbare und wartbare Code zu erstellen. Also, geht forth und interagiert mit Vertrauen! Frohes Coden! ??‍??‍?

Credits: Image by storyset