Was ist TypeScript?

TypeScript ist eine von Microsoft entwickelte Programmiersprache, die JavaScript um ein statisches Typsystem erweitert. Der Name deutet es bereits an: Der Kern der Sprache sind Typen. TypeScript-Code sieht JavaScript sehr ähnlich, enthält aber zusätzliche Typannotationen, die dem Compiler und den Entwicklungswerkzeugen helfen, Fehler frühzeitig zu erkennen.

Die Geschichte hinter TypeScript

Microsoft veröffentlichte TypeScript im Oktober 2012. Das Ziel war es, die Entwicklung großer JavaScript-Anwendungen zu vereinfachen. JavaScript selbst wurde ursprünglich für kleine Skripte in Webseiten entworfen, nicht für komplexe Softwareprojekte mit Tausenden von Zeilen Code. TypeScript schließt diese Lücke, indem es Konzepte aus statisch typisierten Sprachen wie Java oder C# übernimmt und auf das JavaScript-Ökosystem überträgt.

Anders als manche Konkurrenten verfolgt TypeScript einen pragmatischen Ansatz: TypeScript ist eine strikte Obermenge von JavaScript. Das bedeutet, jeder gültige JavaScript-Code ist gleichzeitig auch gültiger TypeScript-Code. Entwickler können bestehende Projekte schrittweise migrieren, ohne alles auf einmal umschreiben zu müssen.

Wie TypeScript funktioniert

TypeScript fügt dem normalen Entwicklungsprozess einen Kompilierungsschritt hinzu. Der TypeScript-Compiler, kurz tsc, liest die TypeScript-Quelldateien mit der Dateiendung .ts oder .tsx und erzeugt daraus normales JavaScript.

Während der Kompilierung prüft der Compiler alle Typannotationen. Entdeckt er Unstimmigkeiten, gibt er Fehlermeldungen aus, noch bevor der Code überhaupt läuft. Dieser Schritt heißt statische Typenprüfung und ist einer der größten Vorteile von TypeScript.

Hier ein einfaches Beispiel. In reinem JavaScript könnte folgender Fehler unbemerkt bleiben:

function begrüße(name) {
  return "Hallo, " + name.toUpperCase();
}

begrüße(42); // Laufzeitfehler: toUpperCase ist keine Funktion auf Zahlen

Mit TypeScript schlägt der Compiler bereits beim Kompilieren an:

function begrüße(name: string): string {
  return "Hallo, " + name.toUpperCase();
}

begrüße(42); // Compilerfehler: Argument vom Typ 'number' ist nicht zuweisbar zu 'string'

Die wichtigsten Vorteile

Frühzeitige Fehlererkennung

Der größte Vorteil von TypeScript ist, dass viele Fehler nicht erst zur Laufzeit, sondern bereits während der Entwicklung auffallen. Das spart Debugging-Zeit und erhöht die Codequalität.

Bessere Werkzeugunterstützung

Editoren wie Visual Studio Code können TypeScript-Code viel genauer analysieren als JavaScript. Autocomplete, Refactoring-Werkzeuge und die Sprung-zu-Definition-Funktion arbeiten zuverlässiger und genauer.

Selbstdokumentierender Code

Typannotationen dienen gleichzeitig als Dokumentation. Wer eine Funktion aufruft, sieht sofort, welche Parameter erwartet werden und was zurückgegeben wird, ohne in die Implementierung schauen zu müssen.

interface Benutzer {
  id: number;
  name: string;
  email: string;
  aktiv: boolean;
}

function holeBenutzer(id: number): Promise<Benutzer> {
  // Implementierung hier
  return fetch(`/api/benutzer/${id}`).then(res => res.json());
}

Bessere Teamarbeit

In größeren Teams ist TypeScript besonders wertvoll. Wenn mehrere Entwickler an einem Projekt arbeiten, helfen Typen dabei, die Schnittstellen zwischen Modulen klar zu definieren. Änderungen an einer Funktion erzeugen sofortige Fehler an allen Stellen, die diese Funktion falsch verwenden.

TypeScript in der Praxis ausprobieren

Wer TypeScript ohne lokale Installation kennenlernen möchte, kann das Playground auf typescript-playground.de nutzen. Dort lässt sich TypeScript-Code direkt im Browser schreiben und ausführen, ohne erst einen Compiler einrichten zu müssen. Das ist ideal für erste Experimente und schnelle Tests.

Für die lokale Entwicklung installiert man TypeScript über npm:

// Globale Installation
// npm install -g typescript

// Projektspezifisch (empfohlen)
// npm install --save-dev typescript

// Kompilierung starten
// npx tsc meineDatei.ts

TypeScript-Konfiguration

Größere Projekte nutzen eine tsconfig.json, um das Verhalten des Compilers zu steuern:

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

Die Option strict: true aktiviert mehrere strenge Prüfungen auf einmal und wird für neue Projekte empfohlen.

Fazit

TypeScript ist heute ein fester Bestandteil des modernen Web-Ökosystems. Frameworks wie Angular setzen vollständig auf TypeScript, und Bibliotheken wie React oder Vue bieten hervorragende TypeScript-Unterstützung. Der anfängliche Lernaufwand zahlt sich schnell aus, besonders bei wachsenden Projekten. Wer mit TypeScript anfangen möchte, findet im Playground auf typescript-playground.de einen unkomplizierten Einstieg direkt im Browser.