Was ist TypeScript? Unterschiede zu JavaScript

01Was ist TypeScript?

Die kürzeste Antwort auf die Frage Was ist TypeScript? lautet: JavaScript mit Typinformationen. Technisch ist TypeScript eine Obermenge von JavaScript; jeder gültige JavaScript-Code ist zugleich gültiger TypeScript-Code. Hinzu kommen lediglich Typdefinitionen und ein Compiler, der sie prüft.

Browser und Node.js sind nicht dafür gemacht, TypeScript direkt auszuführen. Deshalb durchläuft der Code zunächst den Compiler, die Typinformationen werden entfernt, und es entsteht reines JavaScript. Der Nutzen von TypeScript liegt also in der Entwicklungsphase; der Code, der zum Nutzer geht, ist weiterhin JavaScript.

Die Sprache wurde 2012 erstmals vorgestellt und ist mit der Zeit zu einem der Standardwerkzeuge der Webentwicklung geworden. Heute sind viele beliebte Bibliotheken direkt in TypeScript geschrieben, und die meisten Werkzeuge zum Anlegen neuer Projekte bieten TypeScript bei der Einrichtung als erste Option an. Diese Verbreitung bedeutet, dass das Gelernte sich leicht auf andere Projekte übertragen lässt.

Wer die Grundlagen der Sprache nicht kennt, für den kann der direkte Einstieg in TypeScript schwierig sein. Wer zuerst die Konzepte im Beitrag Was ist JavaScript? festigt, versteht leichter, welches Problem das Typsystem löst.

02Wie findet Typsicherheit Fehler?

JavaScript ist dynamisch typisiert: Sie können einer Variablen erst eine Zahl und dann einen Text zuweisen, und die Sprache protestiert nicht. In kleinen Skripten ist diese Flexibilität bequem; in einem Projekt mit Hunderten Dateien bemerkt man aber meist erst, dass sich die von einer Funktion erwarteten Daten geändert haben, wenn live ein Fehler auftritt.

Typsicherheit bedeutet, dass die Form jedes Datenwerts vorab definiert wird und Verwendungen, die dieser Definition widersprechen, beim Kompilieren abgelehnt werden. Im folgenden Beispiel werden ein falscher Feldname oder ein falscher Typ im Editor mit einer roten Linie markiert, bevor der Code läuft.

interface Siparis {
  id: number;
  musteri: string;
  tutar: number;
  odendi: boolean;
}

function ozetYaz(s: Siparis): string {
  return `${s.musteri} - ${s.tutar.toFixed(2)}`;
}

ozetYaz({ id: 1, musteri: "Ayşe", tutar: 150, odendi: true }); // gültig
ozetYaz({ id: 2, musteri: "Can", tutar: "150", odendi: false });
// Fehler: Typ 'string' kann Typ 'number' nicht zugewiesen werden.

Editor-Unterstützung

Typinformationen fangen nicht nur Fehler ab, sondern geben auch dem Editor Intelligenz. Welche Felder ein Objekt hat, wird automatisch vervollständigt, was eine Funktion erwartet, sehen Sie beim Darüberfahren, und benennen Sie ein Feld um, werden alle Verwendungen sicher aktualisiert. Dieses sichere Refactoring spart in großen Codebasen erheblich Zeit.

03TypeScript vs. JavaScript

Der Unterschied zwischen TypeScript und JavaScript liegt nicht zur Laufzeit, sondern im Entwicklungsprozess. Die folgende Tabelle vergleicht beide Sprachen aus Sicht des Alltags:

04Vorteile von TypeScript

Die Vorteile von TypeScript spürt man vor allem, wenn das Projekt wächst und das Team größer wird. Bei einem kurzen Skript einer einzelnen Person ist der Unterschied klein; bei einem System, an dem fünf Entwickler zwei Jahre lang arbeiten, ist er entscheidend.

• Frühe Fehlererkennung: Tippfehler, fehlende Felder und falsche Typen werden sichtbar, bevor der Code läuft.
• Selbstdokumentierender Code: Ein- und Ausgabe einer Funktion lassen sich an den Typen ablesen; separate Dokumentation wird weniger gebraucht.
• Sichere Änderungen: Alle Dateien, die von einer Änderung am Datenmodell betroffen sind, listet der Compiler auf.
• Vertrag im Team: Gemeinsam genutzte Typen zwischen Frontend und Backend machen klar, was die API zurückgibt.
• Breite Unterstützung im Ökosystem: React, Next.js, Node.js und die meisten gängigen Bibliotheken kommen mit Typdefinitionen.

Es gibt auch Nachteile

TypeScript ist nicht umsonst. Es kommen ein Kompilierschritt und Konfiguration hinzu, komplexe Typdefinitionen können Einsteiger überfordern, und hastig geschriebene any-Typen heben die Typsicherheit unbemerkt wieder auf. Bei kleinen, kurzlebigen Projekten kann dieser Mehraufwand den Nutzen übersteigen. Außerdem haben manche alten, nicht mehr gepflegten Pakete unvollständige Typdefinitionen; für diese müssen die Definitionen unter Umständen von Hand geschrieben werden.

05Bei welchem Projekt lohnt sich TypeScript?

Die Entscheidung hängt von Lebensdauer, Größe und Team des Projekts ab. Als Faustregel profitiert jede Software, die mehrere Personen lange Zeit warten werden, von TypeScript.

In Systemen, in denen viele Datenmodelle miteinander verknüpft sind, etwa Verwaltungspanels, Buchungsmaschinen sowie Bestands- und Bestellabläufen, sind Typdefinitionen gewissermaßen die Landkarte des Projekts. Bei individuellen Softwarelösungen zeigt diese Karte sofort, ob eine neue Funktion einen alten Bildschirm kaputtmacht.

Ähnlich ist es bei Projekten, die mit externen Systemen wie Marktplätzen, Versanddienstleistern und Buchhaltung kommunizieren. Wird die Form der von jedem Dienst zurückgegebenen Daten über Typen definiert, fällt eine Änderung auf der Gegenseite viel früher auf; das verringert Überraschungen bei Integrationen.

Eine Hotelsoftware, in der Zimmer-, Datums-, Preis- und Gästedaten gleichzeitig auf vielen Bildschirmen verwendet werden, oder eine Immobilien-Software, in der Inserate, Filter und Benutzerrollen ineinandergreifen, sind gute Beispiele für solche Projekte. Ändert sich Name oder Typ eines Felds, listet der Compiler alle Berichte, Formulare und Dienste, die dieses Feld nutzen, auf einmal auf; das Team schließt die Änderung ab, ohne eine Ecke zu übersehen.

• TypeScript ist sinnvoll: Anwendungen mit vielen Bildschirmen, Panels, langlebige Produkte, API- und Integrationsschichten.
• Nicht zwingend: One-Page-Vorstellungswebsites, kurze Kampagnenseiten, Automatisierungsskripte mit wenigen Zeilen.

06Kosten des Umstiegs auf TypeScript

Ein bestehendes JavaScript-Projekt auf TypeScript umzustellen, muss nicht auf einmal geschehen. Da der Compiler JavaScript- und TypeScript-Dateien nebeneinander verarbeiten kann, ist ein schrittweiser Umstieg möglich.

Die Kosten bestimmen vor allem die Größe der Codebasis, vorhandene Tests, die Typunterstützung der verwendeten Bibliotheken und die Erfahrung des Teams. In einem Projekt mit Tests verläuft der Umstieg deutlich sicherer; dazu ist unser Beitrag Was ist Softwaretest? eine gute Ergänzung.

1. Fügen Sie dem Projekt den Compiler und eine Konfigurationsdatei hinzu; starten Sie anfangs mit lockeren Regeln.
2. Schreiben Sie jede neue Datei in TypeScript.
3. Erstellen Sie Typdefinitionen für die am häufigsten verwendeten Datenmodelle.
4. Wandeln Sie kritische Module einzeln um und führen Sie deren Tests aus.
5. Ist die Codebasis bereit, verschärfen Sie die Regeln durch Aktivieren des Strict-Modus.

npm install --save-dev typescript
npx tsc --init
npx tsc --noEmit

07Tipps zum Lernen von TypeScript

Wer TypeScript lernen möchte, fährt am besten damit, einem JavaScript-Projekt, das er kennt, nach und nach Typen hinzuzufügen. Zuerst kommen die Grundtypen (string, number, boolean, Array), dann interface- und type-Definitionen, danach Union-Typen und Generics.

Wenn Sie Oberflächen entwickeln, beschleunigt es das Lernen, TypeScript direkt zusammen mit React einzusetzen; die Props von Komponenten mit Typen zu beschreiben, ist eine sehr konkrete Übung. Zur React-Seite lesen Sie unseren Beitrag Was ist React?.

Für das offizielle Handbuch und die Testumgebung ist typescriptlang.org die verlässlichste Quelle. Im Playground im Browser sehen Sie sofort, in welches JavaScript der geschriebene Code umgewandelt wird.