Was ist TypeScript?

Willkommen zum TypeScript-Kurs! Du kennst JavaScript, also weißt du auch, wie leicht sich ein kleiner Fehler in ein Programm einschleicht: ein Tippfehler im Namen einer Eigenschaft, eine Zahl, die als Text geschrieben ist, eine Variable, die etwas anderes enthält, als du erwartet hast. JavaScript beschwert sich nicht. Es führt das Programm aus, und der Fehler zeigt sich später als seltsames undefined, als NaN oder als Absturz, oft weit entfernt von der Zeile, die ihn verursacht hat. Manchmal zeigt er sich gar nicht, und das Programm liefert einfach still ein falsches Ergebnis.

TypeScript ist JavaScript mit Typen. Ein Typ sagt, was für ein Wert etwas ist: eine Zahl, ein Text, true oder false, eine Liste von Gegenstandsnamen oder ein Objekt mit Name und Leben. TypeScript kennt den Typ jedes Werts in deinem Programm und prüft, ob du jeden Wert richtig verwendest. Und das tut es bevor das Programm läuft. Hier ist ein Held und eine Zeile mit einem Tippfehler:

const held = { name: "Kira", leben: 50 };
console.log(held.lebn);

JavaScript würde undefined ausgeben und weitermachen, als wäre nichts passiert. TypeScript führt das Programm gar nicht erst aus. Stattdessen sagt es dir, was falsch ist und wo:

main.ts(2,18): error TS2551: Property 'lebn' does not exist on type '{ name: string; leben: number; }'. Did you mean 'leben'?

In Zeile 2 hat der Held keine Eigenschaft lebn. Meintest du leben? In dieser Lektion lernst du, solche Meldungen zu lesen.

TypeScript wurde von Microsoft entwickelt, und seine erste Version erschien 2012. Heute ist es eine der beliebtesten Programmiersprachen der Welt, und viele große JavaScript-Projekte nutzen es. Der Code-Editor Visual Studio Code zum Beispiel ist in TypeScript geschrieben. Programmierer mögen es aus zwei Gründen: Die Typen fangen Fehler früh ab, und sie sagen jedem, der den Code liest, was jeder Wert ist.

TypeScript baut auf JavaScript auf. Alles, was du im JavaScript-Kurs gelernt hast, funktioniert in TypeScript und wird genauso geschrieben: console.log, Variablen, Bedingungen, Schleifen, Arrays, Funktionen und Objekte. TypeScript fügt nur Typen hinzu. Deshalb ist jedes JavaScript-Programm auch ein TypeScript-Programm. TypeScript findet darin höchstens Fehler oder bittet dich, einen Typ anzugeben, wo es ihn nicht selbst herausfinden kann.

Webbrowser können TypeScript allerdings nicht ausführen, nur JavaScript. Deshalb durchläuft ein TypeScript-Programm zuerst einen Compiler. Der Compiler prüft die Typen und wandelt das Programm dann in JavaScript um: Er entfernt die Typen, und übrig bleibt gewöhnliches JavaScript, das so läuft, wie du es kennst. Dateien mit TypeScript-Programmen enden auf .ts statt auf .js. Hier steht dein Programm in der Datei main.ts.

Auf dieser Seite arbeitet der Compiler direkt in deinem Browser: Es ist tsrs, eine Version des Compilers von TypeScript 7, die so angepasst wurde, dass sie auf einer Webseite läuft. Wenn du auf Ausführen klickst, prüft er zuerst dein Programm. Findet er einen Typfehler, läuft das Programm gar nicht, und du siehst den Fehler in Rot unter der Ausgabe. Nur ein Programm ohne Typfehler läuft, und dann läuft es genau wie im JavaScript-Kurs.

Was erwartet dich? Zuerst lernst du die Basistypen kennen und wie TypeScript sie selbst herausfindet, und du versiehst Funktionen und Objekte mit Typen. Dann kommen die Funktionen, die TypeScript richtig stark machen: Werte, die einer von mehreren Typen sein können, Daten, die so modelliert sind, dass unmögliche Kombinationen sich gar nicht erst schreiben lassen, Generics, die mit jedem Typ arbeiten, und Klassen. Die Beispiele stammen aus einem Rollenspiel: Kira die Waldläuferin, ihre Tränke, Schwerter und ihr Gold, Goblins, Wölfe, ein Drache und Aufträge. Im Abschlussprojekt setzt du alles zu Kiras Inventar und Auftragsbuch zusammen und siehst, wie TypeScript jede Stelle im Programm findet, die sich ändern muss, wenn du etwas Neues hinzufügst.

Aber zuerst stellen wir sicher, dass JavaScript hier so funktioniert, wie du es kennst. Das Programm im Editor ist reines JavaScript, ohne einen einzigen Typ, und trotzdem ist es ein gültiges TypeScript-Programm.