Was ist TypeScript?

TypeScript ist eine von Microsoft entwickelte Programmiersprache, die auf JavaScript aufbaut und es um ein statisches Typsystem erweitert. Man bezeichnet TypeScript oft als “JavaScript mit Typen”.

TypeScript vs. JavaScript

JavaScript ist eine dynamisch typisierte Sprache. Das bedeutet, dass Variablen zur Laufzeit jeden beliebigen Typ annehmen können:

// JavaScript - kein Fehler zur Entwicklungszeit
let message = "Hallo";
message = 42;        // Funktioniert, obwohl fragwürdig
message = { x: 1 };  // Auch das geht

TypeScript fügt ein Typsystem hinzu, das Fehler bereits beim Schreiben des Codes erkennt:

// TypeScript - Fehler werden sofort angezeigt
let message: string = "Hallo";
message = 42;        // Fehler: Type 'number' is not assignable to type 'string'

Warum TypeScript?

1. Fehler früh erkennen

Der größte Vorteil von TypeScript ist die Fehlererkennung zur Entwicklungszeit. Statt Bugs erst beim Testen oder im Produktionsbetrieb zu entdecken, werden viele Fehler direkt im Editor angezeigt.

function calculateArea(width: number, height: number): number {
    return width * height;
}

// Fehler wird sofort angezeigt:
calculateArea("10", 20);  // Argument of type 'string' is not assignable

2. Bessere Entwicklererfahrung

TypeScript ermöglicht IntelliSense - dein Editor weiß, welche Eigenschaften und Methoden verfügbar sind:

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

function greetUser(user: User) {
    // Dein Editor zeigt automatisch: name, email, age
    console.log(user.  // ← Autovervollständigung!
}

3. Sicheres Refactoring

Wenn du Code umstrukturierst, findet TypeScript automatisch alle Stellen, die angepasst werden müssen:

// Wenn du 'email' in 'emailAddress' umbenennst,
// zeigt TypeScript alle Stellen an, die aktualisiert werden müssen
interface User {
    name: string;
    emailAddress: string;  // Umbenennung
}

4. Selbstdokumentierender Code

Typen dienen als Dokumentation. Du siehst sofort, was eine Funktion erwartet und zurückgibt:

// Ohne Typen - was sind die Parameter? Was kommt zurück?
function processData(data, options) {
    // ...
}

// Mit Typen - alles ist klar!
function processData(
    data: UserData[],
    options: ProcessingOptions
): ProcessingResult {
    // ...
}

TypeScript ist ein Superset von JavaScript

Jeder gültige JavaScript-Code ist auch gültiger TypeScript-Code. Das bedeutet:

• Du kannst schrittweise zu TypeScript migrieren
• Bestehende JavaScript-Bibliotheken funktionieren weiterhin
• Du kannst TypeScript-Features nach und nach einführen

// Das ist gültiges JavaScript UND TypeScript:
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled);

Der Kompilierungsprozess

TypeScript-Code wird in JavaScript kompiliert (transpiliert). Browser und Node.js verstehen kein TypeScript direkt - sie führen das kompilierte JavaScript aus.

app.ts  →  TypeScript Compiler  →  app.js  →  Browser/Node.js

Während der Kompilierung:

1. Werden Typen überprüft (Fehler werden gemeldet)
2. Werden Typen entfernt (JavaScript kennt keine Typen)
3. Wird modernes JavaScript in ältere Versionen umgewandelt (optional)

TypeScript in der Praxis

TypeScript wird von vielen großen Unternehmen und Projekten eingesetzt:

• Microsoft - Angular, VS Code
• Google - Angular Framework
• Airbnb - Frontend und Backend
• Slack - Desktop-Anwendung
• Stripe - API und Dashboard

Fast alle modernen JavaScript-Frameworks haben erstklassige TypeScript-Unterstützung:

• React
• Vue
• Next.js
• Angular (standardmäßig TypeScript)
• Node.js

Zusammenfassung

TypeScript ist JavaScript mit zusätzlichen Typen, das:

• Fehler früher findet - zur Entwicklungszeit statt zur Laufzeit
• Die Produktivität steigert - durch IntelliSense und Autovervollständigung
• Code wartbarer macht - durch bessere Dokumentation
• Refactoring sicherer macht - durch automatische Fehlerkennung

Im nächsten Kapitel richten wir TypeScript ein und schreiben unseren ersten TypeScript-Code!