Was ist TypeScript? Tutorial für Einsteiger mit Beispielen

Was ist TypeScript? TypeScript ist JavaScript mit statischen Typen. Du fügst Variablen, Parametern und Rückgabewerten Typannotationen hinzu, der TypeScript-Compiler prüft sie, bevor das Programm läuft, und gibt normales JavaScript ohne die Typen aus. Dieses JavaScript läuft überall, wo JavaScript läuft: in Browsern, Node.js, Deno und Bun. Dieses TypeScript Tutorial zeigt dir die Grundlagen an ausführbaren Beispielen.

Hier ist ein kleines TypeScript-Programm. Klicke auf Run.

interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

Ausgabe:

Ada is 36 years old
82.33333333333333

Abgesehen von den Teilen nach den Doppelpunkten (: string, : User, : number[]) und dem interface ist das JavaScript. Diese Ergänzungen sagen dem Compiler, was jeder Wert sein darf. Beachte, dass total keine Annotation hat: TypeScript erkennt selbst, dass es eine Zahl ist. Der meiste TypeScript-Code annotiert die Grenzen von Funktionen und lässt den Compiler den Rest ableiten.

Was die Typprüfung findet

Der Sinn der Annotationen ist, dass Fehler auftauchen, während du Code schreibst, und nicht erst, wenn ein Nutzer auf sie stößt. Führe diesen Block aus und lies die Ausgabe:

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

Das Programm startet gar nicht. Stattdessen gibt der Compiler zwei Fehler aus:

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

Jeder Fehler nennt die Datei, Zeile und Spalte, einen Fehlercode (TS2322) und was falsch ist. In reinem JavaScript würden beide Zeilen laufen, und die zweite würde ohne jede Warnung Linus is undefined years old ausgeben. In einem Editor wie VS Code erscheinen dieselben Fehler als rote Unterstreichung, während du tippst, zusammen mit einer Autovervollständigung, die weiß, dass user genau ein name und ein age hat.

Typische Fehler, die die Prüfung findet:

• Ein falsch geschriebener Eigenschafts- oder Methodenname (user.nmae, list.lenght).
• Ein Funktionsaufruf mit zu wenigen oder zu vielen Argumenten oder mit Argumenten vom falschen Typ.
• Ein Wert, der null oder undefined sein könnte, wird verwendet, ohne ihn vorher zu prüfen.
• Ein vergessener Fall einer Union wie "loading" | "done" | "error", wenn der Code eine vollständige Prüfung verwendet.
• Code, der bricht, wenn eine Funktion, von der du abhängst, ihre Signatur ändert.

Typen verschwinden zur Laufzeit

Die Typen von TypeScript existieren nur beim Kompilieren. Der Compiler prüft sie und entfernt sie dann: Das ausgegebene JavaScript hat keine Annotationen und keine Interfaces, und es läuft genau wie JavaScript, das du von Hand geschrieben hast.

Diese Eingabe:

function double(n: number): number {
    return n * 2;
}

wird zu dieser Ausgabe:

function double(n) {
    return n * 2;
}

Deshalb kann TypeScript keine Werte prüfen, die erst während der Ausführung ankommen. Hier behauptet der JSON-Text, ein User zu sein, der Compiler muss dieser Behauptung glauben, und auch zur Laufzeit beschwert sich nichts:

interface User {
    name: string;
    age: number;
}

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

Ausgabe:

string
thirty-six1

Daten von außerhalb des Programms (API-Antworten, Formulareingaben, Dateien) brauchen eine Prüfung zur Laufzeit, zum Beispiel eine Type-Guard-Funktion, die den Wert untersucht. TypeScript vertraut dieser Prüfung dann und grenzt den Typ für dich ein.

Wer TypeScript entwickelt hat und warum

TypeScript entstand bei Microsoft, das Design leitete Anders Hejlsberg (der Entwickler von C#). Es wurde im Oktober 2012 als Version 0.8 veröffentlicht, 1.0 folgte im April 2014. Es ist Open Source unter der Apache-2.0-Lizenz und wird auf GitHub entwickelt. Gemessen an der Zahl der monatlichen Mitwirkenden wurde TypeScript im August 2025 die meistgenutzte Sprache auf GitHub, vor Python und JavaScript.

Der Anlass waren große JavaScript-Codebasen. In JavaScript lässt sich nicht ausdrücken, dass eine Funktion ein User-Objekt erwartet. Eine Eigenschaft umzubenennen oder eine Funktion zu ändern hieß also, die ganze Codebasis zu durchsuchen und zu hoffen, dass die Tests jeden Aufrufer abdecken. TypeScript fügt diese Information so hinzu, dass die volle Kompatibilität mit JavaScript erhalten bleibt:

• Es ist eine Obermenge. Gültiges JavaScript ist gültige TypeScript-Syntax, also kann ein Projekt Datei für Datei umsteigen.
• Es folgt JavaScript. Abgesehen von ein paar frühen Ergänzungen wie enum und namespace fügt TypeScript keine eigenen Laufzeitfunktionen hinzu; neue Syntax kommt aus dem JavaScript-Standard.
• Die Typen kosten zur Laufzeit nichts. Sie werden entfernt, also ist die Ausgabe so schnell wie handgeschriebenes JavaScript.

Die aktuelle Hauptversion ist TypeScript 7. Ihr Compiler wurde in Go als natives Programm neu geschrieben und prüft große Projekte etwa zehnmal schneller als der JavaScript-basierte Compiler, den er ersetzt hat. Die Seite zu TypeScript 7 beschreibt, was sich geändert hat.

Wofür wird TypeScript verwendet? Frontend und Backend

TypeScript wird für dieselbe Software verwendet wie JavaScript, im Frontend wie im Backend. Weil die Ausgabe JavaScript ist, läuft TypeScript überall, wo JavaScript läuft:

Dieselbe Sprache deckt beide Seiten einer Web-App ab. Deshalb teilen viele Teams Typdefinitionen (zum Beispiel die Form einer API-Antwort) zwischen dem Server- und dem Browsercode.

Wie TypeScript-Code zu JavaScript wird

Es gibt zwei getrennte Aufgaben, und verschiedene Tools erledigen sie:

1. Typprüfung. Das macht nur der TypeScript-Compiler, meist als Befehl tsc (Denos deno check führt eine Kopie desselben Compilers aus). Er liest deine .ts-Dateien, meldet Fehler und schreibt standardmäßig auch .js-Dateien.
2. Entfernen der Typen. Das kann tsc, aber auch schnellere Tools, die die Typprüfung ganz überspringen: esbuild, SWC, Babel und das in Node.js, Deno und Bun eingebaute Type Stripping.

Ein übliches Setup nutzt ein schnelles Tool, um den Code auszuführen, und tsc --noEmit (nur prüfen, nichts schreiben) im Editor und in der CI. Das Installieren von tsc und das Ausführen einer .ts-Datei haben in diesem Kapitel jeweils eine eigene Seite.

Die wichtigsten Features in einem Beispiel

Im Alltag verwendet TypeScript eine kleine Menge an Features. Dieser Block enthält die wichtigsten zusammen:

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

Ausgabe:

Ada ada@example.com
Ada can log in
Linus is banned

• Typannotationen (name: string) geben an, was eine Variable, ein Parameter, eine Eigenschaft oder ein Rückgabewert enthält.
• Typinferenz ergänzt die Typen, die du weglässt: account bekommt seinen Typ von dem, was first zurückgibt.
• Interfaces und Typaliase (interface Account, type Status) geben der Form deiner Daten Namen.
• Union-Typen ("active" | "banned", T | undefined) beschreiben einen Wert, der eines von mehreren Dingen ist.
• Narrowing: Nach einer Prüfung wie account !== undefined weiß der Compiler, welcher Fall innerhalb des Blocks gilt.
• Optionale Eigenschaften (email?: string) dürfen fehlen, also enthält ihr Typ undefined.
• Generics (first<T>) lassen eine Funktion oder einen Typ mit vielen Typen arbeiten und halten sie dabei verbunden: ein Array von Account hinein, ein Account heraus.

Musst du zuerst JavaScript lernen?

Es hilft, aber du kannst beides gleichzeitig lernen. Alles, was bestimmt, wie sich TypeScript-Code zur Laufzeit verhält (Variablen, Funktionen, Objekte, Arrays, Promises, Klassen), ist JavaScript, und TypeScript fügt eine Schicht hinzu, die diese Werte beschreibt. Kennst du JavaScript schon, ist das Typsystem der neue Stoff: Annotationen, Interfaces, Unions, Generics und Narrowing. Sind beide neu für dich, fang mit den Grundlagen von JavaScript-Werten und Funktionen an und füge unterwegs Typen hinzu; die Fehlermeldungen des Compilers sind ein guter Lehrer, weil sie auf genau die Zeile zeigen, in der ein Wert falsch verwendet wird.

Eine praktische Reihenfolge, um TypeScript zu lernen: installieren und eine erste Datei ausführen, die Basistypen und Objekttypen lernen, dann Union-Typen und Narrowing, danach Funktionen und Generics. Damit ist der größte Teil von Anwendungscode abgedeckt.