Interfaces

Es gibt noch eine zweite Möglichkeit, die Form eines Objekts zu beschreiben: ein Interface.

interface Monster {
    name: string;
    leben: number;
}

Es bedeutet dasselbe wie type Monster = { name: string; leben: number };. Du verwendest Monster in Annotationen genauso, und die Fehlermeldungen sind dieselben. Es wird nur anders geschrieben: Nach interface kommt der Name und gleich danach die geschweiften Klammern, ohne =. Meist steht jede Eigenschaft in einer eigenen Zeile.

Besonders gut sind Interfaces im Erweitern. Ein Endgegner ist ein Monster mit etwas Zusätzlichem, der Phase des Kampfes. Mit extends bekommt das Interface Endgegner alle Eigenschaften von Monster (name und leben) und fügt eigene hinzu:

interface Monster {
    name: string;
    leben: number;
}

interface Endgegner extends Monster {
    phase: number;
}

const wolf: Monster = { name: "Wolf", leben: 30 };
const drache: Endgegner = { name: "Drache", leben: 300, phase: 1 };

function beschreibe(monster: Monster): string {
    return `${monster.name}: ${monster.leben} Leben`;
}

console.log(beschreibe(wolf));
console.log(beschreibe(drache));
console.log(drache);

Das gibt aus:

Wolf: 30 Leben
Drache: 300 Leben
{ name: "Drache", leben: 300, phase: 1 }

Die gemeinsamen Eigenschaften schreibst du nur einmal. Und wenn Monster eine neue Eigenschaft bekommt, bekommt Endgegner sie auch.

Beachte, dass beschreibe ein Monster erwartet und du ihm den Drachen übergeben kannst. Ein Endgegner hat alles, was ein Monster hat, er ist also auch ein Monster. Umgekehrt geht es nicht: Ein Monster ist kein Endgegner, weil es keine Phase hat:

interface Monster {
    name: string;
    leben: number;
}

interface Endgegner extends Monster {
    phase: number;
}

function beschreibeEndgegner(endgegner: Endgegner): string {
    return `${endgegner.name}, Phase ${endgegner.phase}`;
}

const wolf: Monster = { name: "Wolf", leben: 30 };
console.log(beschreibeEndgegner(wolf));

main.ts(15,33): error TS2741: Property 'phase' is missing in type 'Monster' but required in type 'Endgegner'.

type oder interface? Für die Form eines Objekts funktionieren beide, und du wirst beide in echtem Code sehen. Viele Teams verwenden interface für Objekte und type für alles andere, etwa die Funktionstypen aus der Lektion über Funktionen oder die Unions aus der nächsten Lektion, die sich gar nicht als Interface schreiben lassen. In diesem Kurs verwenden wir beides.

Typische Fehler:

• Ein = nach dem Namen, wie bei type:

interface Monster = {
    name: string;
    leben: number;
}

main.ts(1,19): error TS1005: '{' expected.

• Ein Endgegner-Objekt ohne die zusätzliche Eigenschaft: Property 'phase' is missing in type '{ name: string; leben: number; }' but required in type 'Endgegner'.