TypeScript: Was ist TypeScript?

Kurz: TypeScript (kurz TS) wurde von Microsoft entwickelt und 2012 veröffentlicht. Es ist eine Obermenge von JavaScript: Jedes gültige JavaScript-Programm ist auch ein gültiges TypeScript-Programm. TypeScript ergänzt statische Typen.

Teil des Kurses TypeScript

Kapitel 1 von 15 im Kurs TypeScript (Abschnitt „Einstieg“). Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

TypeScript (kurz TS) wurde von Microsoft entwickelt und 2012 veröffentlicht. Es ist eine Obermenge von JavaScript: Jedes gültige JavaScript-Programm ist auch ein gültiges TypeScript-Programm. TypeScript ergänzt statische Typen.

Das Problem in JavaScript

ohne Typen

function flaeche(breite, hoehe) {
  return breite * hoehe;
}
console.log(flaeche(3, 4));        // 12
console.log(flaeche("3", "x"));    // NaN: kein Fehler, nur falsches Ergebnis
console.log(flaeche(3));           // NaN: Parameter vergessen

JavaScript merkt solche Fehler erst zur Laufzeit, oder nie. In TypeScript meldet schon der Editor beim Tippen:

mit Typen

function flaeche(breite: number, hoehe: number): number {
  return breite * hoehe;
}
console.log(flaeche(3, 4));

Ausgabe:

12

Der Aufruf flaeche("3", "x") wäre jetzt ein Fehler:

Fehlermeldung:

error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Wie arbeitet TypeScript?

1. Du schreibst .ts-Dateien.
2. Der Compiler (tsc) prüft die Typen und übersetzt den Code in normales JavaScript.
3. Das JavaScript läuft im Browser oder in Node.js. Die Typen existieren nur beim Entwickeln und werden vollständig entfernt.

Daraus folgt: TypeScript prüft nicht zur Laufzeit. Daten von außen (Formulare, Netzwerk, JSON) musst du trotzdem selbst prüfen.

Warum TypeScript?

Vorteil	Bedeutung
Fehler früh finden	Tippfehler, falsche Typen, vergessene Fälle fallen beim Schreiben auf
Bessere Editor-Unterstützung	Autovervollständigung, Umbenennen, “Gehe zu Definition” funktionieren zuverlässig
Selbstdokumentierend	Typen zeigen, was eine Funktion erwartet und liefert
Sicheres Umbauen	Beim Refactoring zeigt der Compiler, was kaputt geht
Ökosystem	Fast alle großen Bibliotheken liefern Typen mit

Der Preis: etwas mehr Schreibarbeit und ein Build-Schritt. In größeren Projekten zahlt sich das schnell aus.

Installieren und ausführen

npm install -D typescript          # im Projekt
npx tsc --version
npx tsc hallo.ts                   # erzeugt hallo.js
node hallo.js
npx tsc --init                     # erzeugt eine tsconfig.json
npx tsc --watch                    # neu übersetzen bei Änderungen

Alternativen ohne Build-Schritt für Skripte: node hallo.ts (neuere Node-Versionen entfernen die Typen nur), tsx hallo.ts, deno run hallo.ts und bun hallo.ts. Diese Werkzeuge prüfen die Typen nicht, sie entfernen sie nur. Zum Prüfen läuft tsc --noEmit (etwa in der CI).

Dein erstes Programm

hallo.ts

const name: string = "Mia";
const alter: number = 17;
const istSchueler: boolean = true;
 
function begruessen(person: string, jahre: number): string {
  return `Hallo ${person}, du bist ${jahre} Jahre alt.`;
}
 
console.log(begruessen(name, alter));
console.log(istSchueler ? "Schule" : "Beruf");

Ausgabe:

Hallo Mia, du bist 17 Jahre alt.
Schule

Wie viel Typ muss sein?

Du musst nicht alles beschriften. TypeScript erkennt viele Typen selbst (Typinferenz). Beschrifte vor allem Funktionsparameter und öffentliche Schnittstellen.

Die Spielwiese

Auf typescriptlang.org/play kannst du TypeScript ohne Installation ausprobieren. Der Playground zeigt Fehler, den erzeugten JavaScript-Code und die erkannten Typen.

Merke

• TypeScript = JavaScript + statische Typen
• Der Compiler prüft Typen und erzeugt normales JavaScript; Typen verschwinden zur Laufzeit
• Fehler fallen schon im Editor auf
• Daten von außen musst du trotzdem zur Laufzeit prüfen
• tsc --noEmit prüft Typen, tsc übersetzt zusätzlich

Quiz zur Selbstkontrolle

Was passiert mit den Typen, wenn TypeScript übersetzt wird?

• Sie werden entfernt, übrig bleibt JavaScript (richtig)
• Sie werden zur Laufzeit geprüft
• Sie werden in Maschinencode umgewandelt
• Sie werden in JSON gespeichert

Wie verhält sich TypeScript zu JavaScript?

• Es ist eine Obermenge: gültiges JavaScript ist auch gültiges TypeScript (richtig)
• Es ist eine ganz andere Sprache
• Es ersetzt JavaScript im Browser
• Es ist nur für Server

Womit prüfst du Typen, ohne Dateien zu erzeugen?

• tsc —noEmit (richtig)
• node —check
• tsc —run
• npm typecheck

Weiter im Kurs

Weiter: Grundtypen und Typinferenz

Alle Kapitel: TypeScript im Überblick