Einführung · interaktiv · auf Deutsch Compiler wird geladen …

TypeScript visuell erklärt

TypeScript ist JavaScript mit Typen: Der Compiler findet Fehler, bevor das Programm läuft – und entfernt die Typen danach wieder. Hier läuft der echte TypeScript-Compiler direkt in Ihrem Browser: Jede Fehlermeldung, jeder Typ und jede JavaScript-Ausgabe auf diesen Seiten ist berechnet, nicht abgeschrieben.

🛝 Zum Spielplatz💡 Warum TypeScript?🏋️ Übungen
✅ Probieren Sie es rechts aus
Im Code stecken zwei Fehler, die JavaScript erst zur Laufzeit (oder nie) bemerken würde. Fahren Sie über die rot unterstrichenen Stellen – und beheben Sie sie direkt im Editor.
TypeScript · bearbeitbar, Maus über Namen zeigt Typen
JavaScript (erzeugt von tsc) · …nur lesen

⚙️Was macht der Compiler?

Klicken Sie auf eine Station. tsc liest TypeScript, prüft die Typen und schreibt JavaScript – Typprüfung und Ausgabe sind unabhängig voneinander.
Quelltextmain.tsScannerTokensParserASTBinderSymboleCheckerTypprüfungEmitterAusgabe.js · .d.ts · .mapFehler (Diagnostics)

Checker: Der Checker berechnet Typen, prüft Zuweisungen und grenzt Typen im Kontrollfluss ein. Hier entstehen die Fehlermeldungen wie TS2322 – der größte Teil des Compilers.

🗺️Kapitel

💡
Warum TypeScript
Typfehler zur Entwicklungszeit, Type Erasure, tsc, tsconfig, Node.js, tsx, Bundler
🛝
Spielplatz
Echter TypeScript-Compiler im Browser: JavaScript-Ausgabe, Fehler mit deutschen Erläuterungen, Hover-Typen
🧩
Das Typsystem
Grundtypen, any/unknown/never, Literal-Typen, Union & Intersection als Mengen, strukturelle Typisierung
🔎
Type Narrowing
Schritt-Debugger: Der Typ einer Variablen ändert sich Zeile für Zeile
🏛️
Funktionen & Klassen
Funktionstypen, Overloads, Klassen, Modifikatoren, Enums vs. Unions, satisfies, as const
🧬
Generics
Typparameter, Constraints, Default-Typen und generische Klassen zum Ausprobieren
🧪
Typ-Labor
Utility Types vorher/nachher, Mapped, Conditional, infer und Template Literal Types Schritt für Schritt
🛠️
Praxis
React, API-Typen aus JSON/OpenAPI, .d.ts, Migration von JavaScript, Stolperfallen
🏋️
Übungen
Typfehler beheben und Typen schreiben – geprüft vom echten Compiler
📋
Spickzettel
Die wichtigste Syntax auf einen Blick

📅Stand von TypeScript (September 2026)

Auf npm ist 7.0.2 als „latest“ markiert. Der Spielplatz nutzt 6.0.3, weil 7.0 keine JavaScript-API mitbringt, die man im Browser einbetten könnte.
  1. TypeScript 5.91. Aug. 2025

    Letzte 5.x-Version.

    Quelle: TypeScript-Blog ↗
  2. TypeScript 6.023. März 2026

    „The last release based on the current JavaScript codebase“ – neue Standards: strict an, module: esnext, target: es2025, types: []; target: es5, moduleResolution: node und baseUrl veraltet.

    Quelle: TypeScript-Blog ↗
  3. TypeScript 7.08. Juli 2026

    Nativer Port in Go („Project Corsa“): laut Ankündigung 8- bis 12-mal schnellere Builds. Noch ohne Programmier-API – die soll mit 7.1 kommen.

    Quelle: TypeScript-Blog ↗