Null und Undefined in TypeScript richtig handhaben

Fehler durch unerwartete null- oder undefined-Werte gehören zu den häufigsten Laufzeitproblemen in JavaScript. TypeScript kann diese Fehlerklasse vollständig eliminieren, aber nur wenn du strictNullChecks aktivierst und die richtigen Muster verwendest.

Warum strictNullChecks wichtig ist

Ohne strictNullChecks behandelt TypeScript null und undefined als gültige Werte für jeden Typen. Das bedeutet, dass ein string auch null sein kann, ohne dass der Compiler warnt.

// Ohne strictNullChecks: kein Fehler
let name: string = null;

// Mit strictNullChecks: Fehler
// Type 'null' is not assignable to type 'string'.
let name: string = null;

Aktiviere strictNullChecks in deiner tsconfig.json:

// tsconfig.json
{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

Noch besser: Aktiviere das komplette strict-Flag, das strictNullChecks einschließt.

Typen mit null und undefined erweitern

Wenn ein Wert tatsächlich null sein kann, sagst du das explizit:

function findeNutzerById(id: number): Nutzer | null {
  const nutzer = datenbank.suche(id);
  return nutzer ?? null;
}

const nutzer = findeNutzerById(42);

// Fehler: Object is possibly 'null'
console.log(nutzer.name);

// Korrekt: erst prüfen
if (nutzer !== null) {
  console.log(nutzer.name);
}

Der Compiler erzwingt die Prüfung. Ohne sie gibt es einen Fehler.

Optional Chaining

Optional Chaining mit dem ?.-Operator ist die eleganteste Lösung, wenn du tief in verschachtelte Objekte zugreifen willst, die null oder undefined sein könnten.

interface Bestellung {
  kunde?: {
    adresse?: {
      stadt?: string;
    };
  };
}

function zeigeStadt(bestellung: Bestellung) {
  // Ohne Optional Chaining: vier verschachtelte if-Blöcke
  const stadtOhneHelper =
    bestellung.kunde !== undefined &&
    bestellung.kunde.adresse !== undefined
      ? bestellung.kunde.adresse.stadt
      : undefined;

  // Mit Optional Chaining: eine Zeile
  const stadt = bestellung.kunde?.adresse?.stadt;
  console.log(stadt ?? "Keine Stadt angegeben");
}

Wenn irgendeins der Zwischenglieder undefined ist, gibt der Ausdruck sofort undefined zurück, ohne einen Laufzeitfehler zu werfen.

Nullish Coalescing

Der ??-Operator liefert den rechten Operanden, wenn der linke null oder undefined ist. Im Unterschied zum ||-Operator behandelt er 0, "" und false als gültige Werte.

function zeigePunktestand(punkte: number | null) {
  // Fehler mit ||: 0 Punkte werden als falsy behandelt
  const anzeigeFalsch = punkte || "Kein Ergebnis";
  // Wenn punkte = 0: Ergebnis ist "Kein Ergebnis" (falsch!)

  // Korrekt mit ??
  const anzeige = punkte ?? "Kein Ergebnis";
  // Wenn punkte = 0: Ergebnis ist 0 (korrekt!)
  return anzeige;
}

Type Guards für null-Checks

TypeScript versteht bestimmte Prüfmuster und verengt den Typen nach der Prüfung automatisch.

function verarbeiteEingabe(eingabe: string | null | undefined) {
  if (eingabe == null) {
    // Hier ist eingabe: null | undefined
    console.log("Keine Eingabe");
    return;
  }

  // Hier ist eingabe: string (TypeScript weiß das)
  console.log(eingabe.toUpperCase());
}

Der Doppelgleich == null prüft sowohl auf null als auch auf undefined in einem Schritt. Das ist ein akzeptiertes Muster in TypeScript-Codebasen.

Non-Null Assertion Operator

Manchmal weißt du als Entwickler sicher, dass ein Wert nicht null ist, aber TypeScript sieht das nicht. Mit dem !-Operator teilst du das dem Compiler mit.

function initialisiereApp() {
  const container = document.getElementById("app");

  // TypeScript: container ist HTMLElement | null
  // Fehler: Object is possibly 'null'
  container.innerHTML = "Hallo Welt";

  // Mit Non-Null Assertion
  container!.innerHTML = "Hallo Welt";
}

Vorsicht: Der !-Operator schaltet die Prüfung aus. Wenn du ihn falsch verwendest, gibt es Laufzeitfehler. Nutze ihn nur, wenn du dir wirklich sicher bist.

Undefined bei Funktionsparametern

Optionale Parameter sind implizit undefined, wenn sie nicht übergeben werden:

function begruessung(name: string, titel?: string): string {
  if (titel !== undefined) {
    return `Hallo ${titel} ${name}`;
  }
  return `Hallo ${name}`;
}

begruessung("Müller");
begruessung("Müller", "Dr.");

Du kannst auch einen Standardwert setzen, der undefined ersetzt:

function begruessung(name: string, titel: string = "Herr/Frau"): string {
  return `Hallo ${titel} ${name}`;
}

Im Playground testen

Das Playground ist ideal, um strictNullChecks in Aktion zu sehen. Schreibe eine Funktion, die null zurückgeben kann, und beobachte, wie TypeScript dich an jedem Aufrufpunkt zwingt, den Fall zu behandeln. Das macht die Auswirkungen unmittelbar greifbar.

Fazit

strictNullChecks ist kein optionaler Komfort, sondern eine Grundvoraussetzung für robusten TypeScript-Code. Optional Chaining und Nullish Coalescing machen den Code dabei lesbarer als verschachtelte if-Blöcke. Wer diese Muster konsequent anwendet, vermeidet eine ganze Klasse von Laufzeitfehlern vollständig.