Der Held
Willkommen in der letzten Lektion des TypeScript-Kurses! Hier fügst du alles zusammen, was du gelernt hast, und baust Schritt für Schritt ein Programm: Kiras Inventar und Auftragsbuch. Kira, die Waldläuferin, trägt ein paar Gegenstände bei sich, benutzt einige davon auf ihrem Weg und führt eine Liste ihrer Aufträge. Wenn du fertig bist, gibt dein Programm Folgendes aus:
Kira (Waldläufer), Stufe 3, Leben 34/50, Gold 120
Inventar:
- Heiltrank (heilt 20)
- Silberschwert (Schaden 12)
- Alter Schlüssel (öffnet die Gruft)
- Schriftrolle des Lichts (Zauber: Licht)
Kira trinkt Heiltrank: Leben 50/50
Kira rüstet Silberschwert aus
Kira hat kein Drachenei
Aufträge:
[erledigt] Wölfe im Wald: +50 Gold
[offen] Die verlorene Krone
[gescheitert] Rettet den Müller: die Mühle ist abgebrannt
[erledigt] Die Goblin-Brücke: +30 Gold
Erledigt: 2, offen: 1, gescheitert: 1
Kira (Waldläufer), Stufe 3, Leben 50/50, Gold 200Das Programm beschreibt Kira, listet ihre Gegenstände auf, benutzt zwei davon (der Trank heilt sie, und sie nimmt das Schwert in die Hand), sucht einen, den sie nicht hat, geht ihre Aufträge durch, zählt sie und addiert die Belohnungen zu ihrem Gold. Du verwendest den größten Teil des Kurses: Annotationen, Funktionen, Interfaces, schreibgeschützte und optionale Eigenschaften, Literal-Unions, diskriminierte Unions mit switch und Vollständigkeitsprüfung, find und undefined, eine generische Funktion mit Einschränkung, Record und einen Typ, der aus einem anderen Typ stammt. Jede Übung setzt dort fort, wo die vorige aufgehört hat (der Editor beginnt mit ihrem fertigen Code), und fügt ein Stück hinzu.
Der Plan. Im Editor stehen vier Kommentare, die das Programm in Teile gliedern. Ganz oben steht // Typen: Die Typen beschreiben die Daten, mit denen das Programm arbeitet, damit jeder, der das Programm öffnet, sie als Erstes sieht. Darunter folgen // Funktionen, dann // Daten mit Kira (und später ihren Aufträgen) und ganz unten // Hauptprogramm, das die Funktionen verwendet und ausgibt. Die Typen könnten überall in der Datei stehen, weil sie verschwinden, bevor das Programm läuft. Aber kira muss über dem Hauptprogramm erstellt werden, das sie verwendet, weil das Programm von oben nach unten läuft.
Der erste Schritt: der Held. In diesem Spiel gehört ein Held zu einer von drei Klassen. Eine Liste erlaubter Werte ist eine Literal-Union aus der Lektion „Unions und Eingrenzen“. Ein Held ist ein Objekt, bekommt also ein interface, wie in der Lektion „Objekttypen“. Zum Beispiel ein Monster und seine Schwierigkeit:
type Schwierigkeit = "leicht" | "normal" | "schwer";
interface Monster {
readonly name: string;
schwierigkeit: Schwierigkeit;
leben: number;
}
function beschreibeMonster(monster: Monster): string {
return `${monster.name} (${monster.schwierigkeit}), Leben ${monster.leben}`;
}
const troll: Monster = { name: "Troll", schwierigkeit: "schwer", leben: 80 };
console.log(beschreibeMonster(troll));Das gibt aus:
Troll (schwer), Leben 80Kiras Name ändert sich während des Abenteuers nicht, mache ihn also readonly. TypeScript meldet dann jede Zeile, die versucht, ihn zu ändern: Cannot assign to 'name' because it is a read-only property. Ihr Leben, ihr Gold und ihre Stufe ändern sich, das sind also gewöhnliche Eigenschaften. maxLeben ist das meiste Leben, das sie haben kann: Später heilt sie ein Trank nicht über diesen Wert hinaus.
Annotiere kira mit Held, damit TypeScript sie gleich dort gegen das Interface prüft, wo sie erstellt wird. Ohne die Annotation würde TypeScript ihren Typ aus dem Objekt ableiten, und ihre heldenKlasse wäre nur ein string: Die Eigenschaften eines Objekts können sich ändern, deshalb bekommen sie den weiteren Typ, wie du mit typeof in der vorigen Lektion gesehen hast. beschreibeHeld(kira) wäre dann ein Fehler, weil nicht jeder String eine HeldenKlasse ist.
Die Funktion beschreibeHeld gibt eine Textzeile über den Helden zurück, und das Hauptprogramm gibt sie aus. Baue den Text mit einem Template-Literal, wie in beschreibeMonster. Am Ende der Lektion gibst du dieselbe Zeile noch einmal aus, nach Kiras Abenteuer, deshalb lohnt sich dafür eine Funktion.
So schreibst du es:
Anweisungen
- 1
Schreibe unter
// Typenden TypHeldenKlasse: eine Union der Literaltypen"Krieger","Magier"und"Waldläufer". - 2
Schreibe darunter
interface Heldmit einem schreibgeschütztenname(ein Text), einerheldenKlassevom TypHeldenKlasseund den Zahlenstufe,leben,maxLebenundgold. - 3
Erstelle unter
// Dateneine Konstantekiravom TypHeld: Kira, eine Waldläuferin der Stufe 3, mit 34 von 50 Leben und 120 Gold. - 4
Schreibe unter
// Funktioneneine FunktionbeschreibeHeld(held: Held): stringund gib unter// Hauptprogrammaus, was sie für Kira zurückgibt:Kira (Waldläufer), Stufe 3, Leben 34/50, Gold 120