Glückwunsch!
Glückwunsch, dein Programm funktioniert, und du hast das Ende des TypeScript-Kurses erreicht! Es beschreibt Kira, listet ihre Gegenstände auf, benutzt sie, sucht einen, den sie nicht hat, geht ihre Aufträge durch und erstellt einen Bericht. Und bevor es lief, hat TypeScript jede Zeile davon geprüft.
Eine letzte Verbesserung. Kira findet eine Zauberschriftrolle, eine neue Art von Gegenstand: { art: "schriftrolle"; name: string; zauber: string }. In reinem JavaScript würdest du die Schriftrolle hinzufügen und hoffen, dass du an jede Stelle gedacht hast, die mit Gegenständen arbeitet. TypeScript findet sie für dich. Sobald der Typ Schriftrolle in der Union Gegenstand steht und die Schriftrolle in Kiras Inventar liegt, meldet es beide Funktionen mit einem switch:
main.ts(45,19): error TS2322: Type 'Schriftrolle' is not assignable to type 'never'.
main.ts(51,65): error TS2366: Function lacks ending return statement and return type does not include 'undefined'.Der erste Fehler ist die never-Prüfung in beschreibeGegenstand, die den Typ nennt, für den es keinen case gibt. Der zweite ist benutzeGegenstand: Es hat keine never-Prüfung, aber sein Rückgabetyp string sagt, dass es für jeden Gegenstand einen Text zurückgeben muss. Füge beiden den case hinzu, und das Programm funktioniert wieder. In einem großen Programm ist das eine der größten Stärken von TypeScript: Du änderst die Daten, und es zeigt dir jede Stelle, die davon wissen muss.
Was du gelernt hast. Sieh dir an, wie jede Lektion des Kurses ihren Platz in deinem Programm gefunden hat:
- Einführung in TypeScript: TypeScript prüft das Programm, bevor es läuft, und seine Meldungen sagen, was falsch ist und in welcher Zeile. Danach werden die Typen entfernt, und das übrig gebliebene JavaScript läuft.
- Basistypen: Die meisten Variablen brauchen keine Annotation; TypeScript leitet ab, dass
namein der Schleife ein String ist. Du schreibst Typen dort, wo sie wichtig sind. - Funktionen haben Typen für ihre Parameter und Ergebnisse:
beschreibeHeld(held: Held): string. Der Rückgabetyp hat auch den fehlenden Fall inbenutzeGegenstandgefunden. - Objekttypen:
interface Heldbeschreibt Kira, mit einem schreibgeschütztennameund einer optionalenwaffe. - Unions und Eingrenzen:
HeldenKlasseerlaubt nur drei Klassen,findkannundefinedzurückgeben, und die Prüfunggegenstand === undefinedkümmert sich um das Drachenei. - Daten modellieren: Gegenstände und Aufträge sind diskriminierte Unions.
switchgrenzt sie ein, die Vollständigkeitsprüfung mitneverbewachtbeschreibeGegenstand, undRecordenthält die Anzahlen. - Generics:
findeNachName<T extends { name: string }>findet alles mit einem Namen, und das Ergebnis behält seinen Typ. - Klassen kommen in diesem Programm nicht vor: Einfache Objekte und Funktionen haben gereicht. Eine Klasse ist praktisch, wenn Daten und die Methoden, die sie ändern, zusammengehören, zum Beispiel wenn jedes Monster seine eigene Methode
angreifen()hätte. - Utility-Typen:
Auftrag["status"]nimmt die Status ausAuftrag, sodass sie nur an einer Stelle stehen.
TypeScript auf deinem eigenen Computer. Hier hat dein Browser die Programme geprüft und ausgeführt. Auf deinem eigenen Computer brauchst du drei Dinge:
- Einen Editor. Visual Studio Code ist kostenlos und versteht TypeScript ohne jede Einrichtung. Es unterstreicht Typfehler beim Tippen rot, und wenn du mit der Maus auf einen Namen zeigst, zeigt es seinen Typ. Du siehst deine Fehler, noch bevor du die Datei speicherst.
- Node.js, das JavaScript außerhalb des Browsers ausführt. Lade die LTS-Version von nodejs.org herunter und installiere sie. Sie bringt die Befehle
node,npmundnpxmit, die du in einem Terminal eingibst (unter Windows in der Eingabeaufforderung, auf dem Mac in der App Terminal). - TypeScript. Erstelle einen Ordner für dein Projekt, zum Beispiel
abenteuer, gehe im Terminal mitcddorthin und installiere TypeScript hinein:
Der erste Befehl erstellt die Dateinpm init -y npm install --save-dev typescriptpackage.json, die das Projekt beschreibt. Der zweite lädt TypeScript (Version 7, dieselbe Version, die hier deine Programme geprüft hat) in den Ordnernode_modulesherunter.
Speichere dein Programm im Ordner als main.ts. Du prüfst es mit dem TypeScript-Compiler, tsc:
npx tsc --noEmit main.tsWenn alles in Ordnung ist, gibt er nichts aus. Andernfalls gibt er die Meldungen aus, die du von hier kennst, in Farbe und mit der Codezeile unter jeder Meldung. Nur die Stelle wird ein wenig anders geschrieben: main.ts:2:1 - error TS2322: … bedeutet Zeile 2, Spalte 1. --noEmit heißt „nur prüfen“: Ohne es würde tsc auch main.js erstellen, dein Programm als JavaScript ohne die Typen. Und du führst das Programm mit Node.js aus:
node main.tsNode.js 24 und neuer kann eine .ts-Datei direkt ausführen: Es entfernt die Typen und führt das übrig gebliebene JavaScript aus. Aber es prüft sie nicht! Ein Programm mit einem Typfehler läuft trotzdem, genau wie es als JavaScript laufen würde. Prüfe also zuerst mit tsc und führe es dann mit node aus. Und Node.js kann nur Typen entfernen. TypeScript-Features, die in neuen JavaScript-Code umgewandelt werden müssten, wie enum, lassen es mit TypeScript enum is not supported in strip-only mode anhalten. Deshalb hat dieser Kurs sie nicht verwendet, und deshalb hat diese Seite sie auch nicht erlaubt.
Ein größeres Projekt bewahrt seine Einstellungen in einer Datei auf, tsconfig.json. npx tsc --init erstellt sie mit empfohlenen Einstellungen, und von da an prüfst du das ganze Projekt mit npx tsc --noEmit, ohne den Namen der Datei. (Mit einem Dateinamen würde tsc die Einstellungen ignorieren, und es sagt dir das mit einem Fehler.) Diese Einstellungen sind sogar etwas strenger als die hier. Mit noUncheckedIndexedAccess zum Beispiel hat kira.inventar[0] den Typ Gegenstand | undefined, weil das Array leer sein könnte.
Wie es weitergeht. Du kennst jetzt die wichtigsten Teile von TypeScript, und sie reichen für eigene Programme. Hier ein paar Ideen, was du als Nächstes lernen kannst:
- Verbessere dein Programm weiter. Ein Laden, in dem Kira Gegenstände für ihr Gold kauft, ein Monster, gegen das sie mit dem Schwert in der Hand kämpft, ein Stufenaufstieg, wenn sie genug Aufträge erledigt hat. Du lernst am meisten, wenn du deine eigenen Probleme löst, und TypeScript sagt dir, was jede Änderung kaputt macht.
- Das TypeScript Handbook unter typescriptlang.org/docs erklärt alles aus diesem Kurs genauer und noch viel mehr (auf Englisch). Auf derselben Seite lässt dich der Playground TypeScript im Browser ausprobieren und zeigt dir das JavaScript, in das es sich verwandelt.
- Webseiten in TypeScript. Die Seite und ihre Elemente aus der JavaScript-Lektion über Webseiten haben auch in TypeScript Typen:
document.querySelector("#liste")gibt ein Element odernullzurück, und TypeScript zwingt dich, das zu prüfen, genau wie beim Drachenei. - React ist eine Bibliothek, um Web-Apps aus Komponenten zu bauen. Viele React-Projekte sind in TypeScript geschrieben. Der React-Kurs bringt React selbst bei, in reinem JavaScript.
Und wenn du eine andere Sprache ausprobieren möchtest, warten die Kurse Python, C und C++ auf dich.
So schreibst du es:
Anweisungen
- 1
Schreibe unter
Schluesselden TypSchriftrollemitart: "schriftrolle", einemnameundzauber(ein Text) und füge ihn zur UnionGegenstandhinzu. Füge am Ende von Kiras Inventar{ art: "schriftrolle", name: "Schriftrolle des Lichts", zauber: "Licht" }hinzu. Führe das Programm aus und behebe beide Fehler, die TypeScript meldet: InbeschreibeGegenstandgibt die SchriftrolleSchriftrolle des Lichts (Zauber: Licht)zurück, und inbenutzeGegenstandKira wirkt Licht. Das Programm gibt dann alles vom Anfang der Lektion 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 200