TypeScript lernen: Die Roadmap für Einsteiger

TypeScript hat sich als Standard für professionelle JavaScript-Entwicklung etabliert. Immer mehr Unternehmen setzen es ein, und Stellenanzeigen fragen zunehmend nach TypeScript-Kenntnissen. Dieser Leitfaden zeigt dir, wie du strukturiert vorgehst und welche Konzepte du in welcher Reihenfolge lernen solltest.

Voraussetzungen prüfen

Bevor du mit TypeScript beginnst, solltest du JavaScript sicher beherrschen. Stelle sicher, dass du folgende Konzepte kennst:

Variablen, Bedingungen, Schleifen und Funktionen sind das Fundament. Dazu kommen Objekte, Arrays und deren Methoden wie map, filter und reduce. Promises und async/await für asynchronen Code solltest du zumindest grundlegend verstanden haben. ES6-Features wie Arrow Functions, Destructuring und Template Literals sind in TypeScript-Code allgegenwärtig.

Wenn du in diesen Bereichen noch Lücken hast, investiere zunächst dort. Eine solide JavaScript-Basis macht TypeScript-Lernen deutlich effizienter.

Woche 1: TypeScript einrichten und Grundtypen verstehen

Der schnellste Einstieg ohne Konfigurationsaufwand ist das Playground. Mit dem Playground auf dieser Seite kannst du TypeScript direkt im Browser ausprobieren, ohne etwas installieren zu müssen.

Für ein lokales Projekt brauchst du Node.js und npm:

// TypeScript installieren
// npm install -g typescript

// Erste TypeScript-Datei: hallo.ts
const nachricht: string = "Hallo TypeScript!";
const zahl: number = 42;
const aktiv: boolean = true;

console.log(nachricht, zahl, aktiv);

Lerne in dieser Woche die primitiven Typen string, number, boolean, sowie null, undefined und any. Verstehe, wie TypeScript Typen automatisch ableitet (Type Inference) und wann du Typen explizit angeben musst.

Woche 2: Interfaces und Typen

Interfaces sind das Herzstück der objektorientierten TypeScript-Programmierung:

interface Adresse {
  strasse: string;
  hausnummer: number;
  plz: string;
  ort: string;
}

interface Benutzer {
  id: number;
  vorname: string;
  nachname: string;
  email: string;
  adresse?: Adresse; // Optional mit ?
}

function begruesseBenutzer(benutzer: Benutzer): string {
  return `Hallo, ${benutzer.vorname} ${benutzer.nachname}!`;
}

Lerne den Unterschied zwischen interface und type. Beide sind in vielen Fällen austauschbar, aber interface unterstützt Erweiterung (extends) und eignet sich besser für Objekt-Shapes.

Woche 3: Funktionen und Arrays richtig typisieren

Funktionen sind in JavaScript und TypeScript allgegenwärtig. Typisiere sowohl Parameter als auch Rückgabewerte:

// Funktionstypen
type Berechnung = (a: number, b: number) => number;

const addieren: Berechnung = (a, b) => a + b;
const subtrahieren: Berechnung = (a, b) => a - b;

// Generische Arrays
function erstes<T>(liste: T[]): T | undefined {
  return liste[0];
}

const namen: string[] = ["Anna", "Ben", "Clara"];
const ersterName = erstes(namen); // string | undefined

Union-Typen (string | number) und Intersection-Typen (TypeA & TypeB) solltest du in dieser Woche üben.

Woche 4: Klassen und Enums

TypeScript erweitert JavaScript-Klassen um Zugriffsmodifikatoren und strenge Typisierung:

enum Richtung {
  Nord = "NORD",
  Sued = "SUED",
  Ost = "OST",
  West = "WEST",
}

class Spieler {
  private punkte: number = 0;

  constructor(
    public readonly name: string,
    private position: Richtung = Richtung.Nord
  ) {}

  bewegen(richtung: Richtung): void {
    this.position = richtung;
    console.log(`${this.name} bewegt sich nach ${richtung}`);
  }

  punkteHinzufuegen(anzahl: number): void {
    this.punkte += anzahl;
  }

  getPunkte(): number {
    return this.punkte;
  }
}

public, private und protected kontrollieren den Zugriff. readonly verhindert nachträgliche Änderungen.

Monat 2: Generics und fortgeschrittene Typen

Generics machen Code wiederverwendbar ohne Typsicherheit zu opfern:

interface ApiAntwort<T> {
  daten: T;
  status: number;
  nachricht: string;
  erfolgreich: boolean;
}

type NullableRecord<K extends string, V> = {
  [key in K]: V | null;
};

Conditional Types, Mapped Types und Template Literal Types sind die nächste Stufe. Diese Konzepte erfordern Zeit und Praxis.

Empfohlene Lernressourcen

Das offizielle TypeScript-Handbuch ist die beste Primärquelle. Es ist strukturiert aufgebaut und erklärt jeden Bereich mit Beispielen. Ergänzend empfehlen sich die TypeScript-Übungsaufgaben auf Plattformen wie Exercism oder LeetCode, um das Gelernte anzuwenden.

Für Video-Learner bieten YouTube-Kanäle wie Fireship oder Traversy Media kompakte TypeScript-Einführungen. Community-Ressourcen wie Stack Overflow oder die TypeScript-Discord-Server helfen bei konkreten Fragen.

Häufige Anfängerfehler

Das häufigste Problem ist der übermäßige Einsatz von any. any schaltet die Typprüfung für eine Variable aus und negiert den Vorteil von TypeScript. Verwende stattdessen unknown wenn der Typ unbekannt ist, und type-guards um den Typ einzugrenzen.

Ein weiterer Fehler ist das Vermischen von JavaScript- und TypeScript-Denkweise. TypeScript-Typen existieren nur zur Kompilierzeit. Zur Laufzeit verhält sich der Code wie normales JavaScript.

Fazit

TypeScript-Lernen ist eine Investition, die sich schnell auszahlt. Mit einer strukturierten Roadmap, täglichem Üben und echten Projekten wirst du in wenigen Wochen produktiv sein. Fange klein an, nutze das Playground für Experimente, und steigere die Komplexität schrittweise.