Wie man in TypeScript null und undefined prüft: Fallstricke und beste Lösungen

Einleitung: Warum „einfach if (value)“ Sie in die Irre führen kann

Jeder Entwickler, der von JavaScript zu TypeScript wechselt, stößt früher oder später auf die Frage: „Is there a way to check for both null and undefined?“. Diese Frage hat auf Stack Overflow tausende Aufrufe – und das aus gutem Grund. Auf den ersten Blick scheint die Aufgabe trivial: if (value != null) oder if (value) schreiben. Aber der Teufel steckt, wie immer, im Detail.

In diesem Artikel analysieren wir die häufigsten Fehler, die Anfänger (und nicht nur sie) bei der Prüfung auf null und undefined in TypeScript machen. Sie erfahren, warum nicht-strikte Vergleiche gefährlicher sein können, als sie scheinen, wie der Nullish Coalescing-Operator (??) funktioniert und wann Sie benutzerdefinierte Typwächter verwenden sollten. Los geht's!

Fehler Nr. 1: Verwendung von if (!value) für alle falsy-Werte

Das häufigste Antipattern ist der Versuch, das Vorhandensein eines Wertes durch Negation zu prüfen:

// ❌ Schlechtfunction processInput(input: string | null | undefined) {  if (!input) {    console.log('Eingabe fehlt');    return;  }  console.log(input.toUpperCase());}

processInput(''); // ❌ Gibt „Eingabe fehlt“ aus, obwohl der String leer, aber NICHT null und NICHT undefined ist

Das Problem ist, dass !value jeden falsy-Wert in true umwandelt. In TypeScript (und JavaScript) gelten als falsy: false, 0, '' (leerer String), NaN, null, undefined. Wenn Ihre Geschäftslogik einen leeren String oder die Zahl 0 zulässt, wird dieser Code fehlschlagen.

Wie man es vermeidet: Verwenden Sie eine strikte Prüfung auf null und undefined mit === oder !==.

Fehler Nr. 2: Blindes Vertrauen in value == null

Viele Entwickler wissen, dass value == null (doppeltes Gleichheitszeichen) sowohl null als auch undefined gleichzeitig prüft. Das funktioniert tatsächlich:

// ✅ Funktioniert, aber...function check(value: string | null | undefined) {  if (value == null) {    console.log('value ist null oder undefined');  }}

Allerdings ist das doppelte Gleichheitszeichen in TypeScript eine Quelle für nicht offensichtliche Bugs. Zum Beispiel ist null == undefined true, aber null == false ist false. Und was ist mit '' == false? Auch true. Nicht-strikte Vergleiche können sich unvorhersehbar verhalten, besonders in komplexen Bedingungen.

Wie man es vermeidet: In TypeScript ist value == null ein offiziell erlaubtes Muster (Linter lassen es oft zu), aber für Anfänger ist es besser, einen expliziten Ansatz zu verwenden: value === null || value === undefined.

Fehler Nr. 3: Ignorieren von undefined bei der Arbeit mit Objekten

Manchmal prüfen Entwickler nur null und vergessen undefined:

// ❌ Gefährlichinterface User {  name?: string;  age: number | null;}

function greet(user: User) {  if (user.age !== null) {    console.log(`Alter: ${user.age}`);  }  // Wenn age nicht übergeben wurde (undefined), wird der Code ausgeführt!}

greet({ name: 'Alice' }); // Gibt „Alter: undefined“ aus

Das Feld age kann null, number oder undefined sein (wenn es nicht im Interface angegeben ist). Die Prüfung nur auf null lässt undefined durch.

Wie man es vermeidet: Prüfen Sie immer beide Werte, wenn der Typ beide zulässt. Oder verwenden Sie den Optional Chaining-Operator (?.) und Nullish Coalescing (??).

Bester Weg: Strikte Prüfung mit ===

Das