TypeScript null und undefined: Prüfungen, ?. und ??

Mit aktivem strictNullChecks (Teil von strict) sind null und undefined eigene Typen. Ein string kann nie null sein; ein Wert, der fehlen könnte, muss das in seinem Typ sagen, etwa string | null, und TypeScript zwingt dich, diesen Fall zu behandeln, bevor du den Wert verwendest.

function initials(name: string | null | undefined): string {
  if (name == null) return "?"; // handles both null and undefined
  return name
    .split(" ")
    .map((part) => part[0])
    .join("");
}

console.log(initials("Ada Lovelace")); // AL
console.log(initials(null));           // ?
console.log(initials(undefined));      // ?

Nach der Prüfung weiß der Compiler, dass name ein string ist, also ist .split erlaubt. Der Rest dieser Seite behandelt die Wege, diese Prüfung zu machen, und die Operatoren, die sie kurz halten.

strictNullChecks und Fehler vom Typ „possibly null“

Enthält ein Typ null oder undefined, weigert sich TypeScript, den Wert zu verwenden, als wäre er immer da:

// This does not compile: name may be null
function greet(name: string | null) {
  return "Hello, " + name.toUpperCase();
}

console.log(greet("ada"));

index.ts(3,22): error TS18047: 'name' is possibly 'null'.

Die Variante für undefined ist TS18048, 'x' is possibly 'undefined'. Ohne strictNullChecks sind null und undefined in jedem Typ erlaubt, und dieser Code kompiliert und stürzt dann zur Laufzeit mit einem TypeError ab, sobald name zum ersten Mal null ist. Diese Klasse von Bugs ist der Hauptgrund, strict anzulassen.

Woher diese Typen im Alltagscode kommen:

Auf null und undefined prüfen

Jede Prüfung unten engt den Typ im Block ein. Wähle die, die zu dem passt, was du ausschließen willst.

function label(value: string | null | undefined): string {
  if (value === undefined) return "undefined";
  if (value === null) return "null";
  return value.toUpperCase(); // value is string here
}

function orNone(value: string | null | undefined): string {
  if (value == null) return "(none)"; // == null matches null AND undefined
  return `"${value}"`;
}

console.log(label(undefined), label(null), label("ok")); // undefined null OK
console.log(orNone(null), orNone(undefined), orNone("")); // (none) (none) ""

== null ist die eine Stelle, an der lose Gleichheit üblich ist: Es ist genau für null und undefined wahr, sonst nichts. Eine Prüfung auf Truthiness hätte den leeren String als fehlend behandelt, was oft ein Bug ist.

Optional Chaining: ?.

a?.b liest b, wenn a nicht null oder undefined ist, und hört andernfalls auf und gibt undefined zurück. Derselbe Operator funktioniert für Indizes, a?.[i], und für Aufrufe, fn?.().

interface User {
  name: string;
  address?: { city: string; zip?: string };
  tags?: string[];
  onLogin?: () => string;
}

const ada: User = { name: "Ada", address: { city: "London" }, onLogin: () => "welcome" };
const bob: User = { name: "Bob" };

console.log(ada.address?.city);        // London
console.log(bob.address?.city);        // undefined
console.log(ada.address?.zip?.length); // undefined
console.log(bob.tags?.[0]);            // undefined
console.log(ada.onLogin?.());          // welcome
console.log(bob.onLogin?.());          // undefined

Der Typ von bob.address?.city ist string | undefined: Optional Chaining fügt dem Ergebnis undefined hinzu, deshalb kombinierst du es meist mit ??. Das Laufzeitverhalten ist reines JavaScript; die Details zum Kurzschluss stehen unter Optional Chaining.

Das doppelte Fragezeichen: ??

a ?? b gibt a zurück, außer es ist null oder undefined, dann gibt es b zurück. Es ersetzt das ältere Idiom a || b, das auch 0, "", false und NaN verwirft:

function pageSize(input: number | undefined): string {
  const withOr = input || 20;      // 0 is falsy, so it is replaced
  const withNullish = input ?? 20; // only undefined is replaced
  return `${withOr} vs ${withNullish}`;
}

console.log(pageSize(undefined)); // 20 vs 20
console.log(pageSize(0));         // 20 vs 0

const scores = new Map([["Ada", 90]]);
const score: number = scores.get("Linus") ?? 0; // number | undefined becomes number
console.log(score);                             // 0

Bei den Typen entfernt ?? null und undefined von der linken Seite und vereinigt den Rest mit der rechten Seite, deshalb lässt sich scores.get("Linus") ?? 0 einer number zuweisen.

Nullish Assignment: ??=

a ??= b weist a den Wert b nur zu, wenn a null oder undefined ist. Die Geschwister ||= und &&= weisen zu, wenn die linke Seite falsy beziehungsweise truthy ist.

interface Options {
  retries?: number;
  label?: string;
}

function withDefaults(opts: Options) {
  opts.retries ??= 3;   // assign only if null or undefined
  opts.label ||= "job"; // assign if falsy, so "" is replaced too
  return opts;
}

console.log(withDefaults({}));                       // { retries: 3, label: 'job' }
console.log(withDefaults({ retries: 0, label: "" })); // { retries: 0, label: 'job' }

retries: 0 übersteht ??=, während das leere label durch ||= ersetzt wird. Nach opts.retries ??= 3 engt TypeScript opts.retries für den Rest der Funktion auf number ein.

Optionale Eigenschaften vs | undefined

nickname?: string und nickname: string | undefined lesen sich gleich, unterscheiden sich aber darin, ob der Schlüssel existieren muss:

interface WithOptional { nickname?: string }            // key may be missing
interface WithUndefined { nickname: string | undefined } // key must be present

const a: WithOptional = {};
const b: WithUndefined = { nickname: undefined };

// @ts-expect-error: Property 'nickname' is missing in type '{}' but required in type 'WithUndefined'.
const c: WithUndefined = {};

console.log("nickname" in a, "nickname" in b); // false true
console.log(a.nickname === b.nickname);        // true: both read as undefined

Nimm ?, wenn Aufrufer die Eigenschaft weglassen dürfen, und | undefined, wenn jeder Aufrufer sie ausdrücklich übergeben soll, auch wenn der Wert undefined ist. Die Option exactOptionalPropertyTypes (nicht Teil von strict) verschärft ? weiter: nickname?: string lehnt dann { nickname: undefined } ab und akzeptiert nur einen fehlenden Schlüssel oder einen String. Optionale Funktionsparameter (x?: number) verhalten sich wie optionale Eigenschaften: In der Funktion ist x vom Typ number | undefined.

null oder undefined: was verwenden

TypeScript erzwingt keine Wahl, aber beides in einer Codebasis zu mischen bedeutet, dass jede Prüfung zwei Fälle behandeln muss. Eine verbreitete Konvention:

• Nimm undefined (und optionale Eigenschaften) für „nicht gesetzt“ in deinen eigenen Typen. Das erzeugt JavaScript standardmäßig: fehlende Eigenschaften, weggelassene Argumente, erfolglose find und Map.get.
• Akzeptiere null, wo eine API es dir liefert: JSON kennt kein undefined, String.prototype.match und viele DOM-Methoden geben null zurück.
• Prüfe mit == null, wenn ein Wert beides sein kann.

Der Indexzugriff auf Arrays ist die eine Lücke: users[5] ist als Elementtyp typisiert, auch wenn der Index außerhalb des Bereichs liegt. Die Option noUncheckedIndexedAccess (nicht Teil von strict) fügt jedem Indexzugriff | undefined hinzu, damit der Compiler auch das findet.