Motivation

TypeScript ist JavaScript mit einem Typsystem. Du schreibst weiterhin normales JavaScript, kannst aber angeben, welche Typen Variablen, Funktionsparameter und Rückgabewerte haben sollen.

Was TypeScript konkret macht

Betrachte diese Funktion:

function begrüsse(name) {
  return `Hallo, ${name.toUpperCase()}!`
}

begrüsse(42) // Laufzeitfehler: name.toUpperCase is not a function

Mit TypeScript:

function begrüsse(name: string) {
  return `Hallo, ${name.toUpperCase()}!`
}

begrüsse(42) // Fehler im Editor: Argument of type 'number' is not assignable to parameter of type 'string'

Der Fehler wird gefunden, bevor du den Browser öffnest — direkt beim Schreiben im Editor.

Warum das für React besonders nützlich ist

In React übergibst du ständig Daten zwischen Komponenten über Props. TypeScript erzwingt, dass du die Form dieser Daten explizit beschreibst:

type ButtonProps = {
  label: string
  onClick: () => void
  disabled?: boolean
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  )
}

Wenn du <Button /> ohne label verwendest, zeigt der Editor sofort einen Fehler — kein Test, kein Browserfenster nötig. Und wenn du später den Typ eines Props änderst, findet TypeScript alle Stellen, die angepasst werden müssen.

Was TypeScript nicht ist

TypeScript verändert das Laufzeitverhalten deiner App nicht. Typen existieren nur im Quellcode — beim Build werden sie vollständig entfernt. Du bekommst denselben JavaScript-Output wie ohne TypeScript, nur mit mehr Sicherheit während der Entwicklung.