null e undefined in TypeScript: controlli, operatori ?. e ??

Con strictNullChecks attivo (fa parte di strict), null e undefined sono tipi a sé. Una string non può mai essere null; un valore che potrebbe mancare deve dirlo nel suo tipo, come string | null, e TypeScript ti obbliga a gestire quel caso prima di usare il valore.

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));      // ?

Dopo il controllo, il compilatore sa che name è una string, quindi .split è permesso. Il resto della pagina tratta i modi per fare quel controllo e gli operatori che lo accorciano.

strictNullChecks e gli errori "possibly null"

Quando un tipo include null o undefined, TypeScript si rifiuta di usare il valore come se ci fosse sempre:

// 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'.

La versione con undefined è TS18048, 'x' is possibly 'undefined'. Senza strictNullChecks, null e undefined sono ammessi in ogni tipo e questo codice compila, poi va in crash a runtime con un TypeError la prima volta che name è null. Quella categoria di bug è il motivo principale per tenere attivo strict.

Da dove arrivano questi tipi nel codice di tutti i giorni:

Controllare null e undefined

Ogni controllo qui sotto restringe il tipo dentro il blocco. Scegli quello che corrisponde a ciò che vuoi escludere.

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 è l'unico caso in cui l'uguaglianza non stretta è idiomatica: è vera esattamente per null e undefined, nient'altro. Un controllo di truthiness avrebbe considerato mancante la stringa vuota, il che spesso è un bug.

Optional chaining: ?.

a?.b legge b se a non è null né undefined, altrimenti si ferma e restituisce undefined. Lo stesso operatore funziona con gli indici, a?.[i], e con le chiamate, 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

Il tipo di bob.address?.city è string | undefined: l'optional chaining aggiunge undefined al risultato, quindi di solito lo abbini a ??. Il comportamento a runtime è JavaScript puro; vedi optional chaining per i dettagli sul cortocircuito.

Il doppio punto interrogativo: ??

a ?? b restituisce a a meno che sia null o undefined, nel qual caso restituisce b. Sostituisce il vecchio idioma a || b, che scarta anche 0, "", false e NaN:

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

Sul piano dei tipi, ?? toglie null e undefined dal lato sinistro e unisce il resto con il lato destro, ed è per questo che scores.get("Linus") ?? 0 si può assegnare a un number.

Nullish assignment: ??=

a ??= b assegna b ad a solo quando a è null o undefined. I suoi fratelli ||= e &&= assegnano quando il lato sinistro è falsy o truthy.

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 sopravvive a ??=, mentre la label vuota viene sostituita da ||=. Dopo opts.retries ??= 3, TypeScript restringe opts.retries a number per il resto della funzione.

Proprietà opzionali vs | undefined

nickname?: string e nickname: string | undefined si leggono allo stesso modo, ma differiscono sul fatto che la chiave debba esistere o no:

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

Usa ? quando chi chiama può omettere la proprietà, e | undefined quando vuoi che ogni chiamante la passi esplicitamente, anche se il valore è undefined. L'opzione exactOptionalPropertyTypes (non fa parte di strict) rende ? ancora più rigido: nickname?: string rifiuta allora { nickname: undefined } e accetta solo una chiave mancante o una stringa. I parametri opzionali delle funzioni (x?: number) si comportano come le proprietà opzionali: dentro la funzione x è number | undefined.

null o undefined: quale usare

TypeScript non impone una scelta, ma mescolarli entrambi in un codebase significa che ogni controllo deve gestire due casi. Una convenzione comune:

• Usa undefined (e le proprietà opzionali) per "non impostato" nei tuoi tipi. È ciò che JavaScript produce di default: proprietà mancanti, argomenti omessi, find e Map.get che non trovano nulla.
• Accetta null dove te lo dà un'API: JSON non ha undefined, String.prototype.match e molti metodi del DOM restituiscono null.
• Controlla con == null quando un valore potrebbe essere l'uno o l'altro.

L'indicizzazione degli array è l'unica lacuna: users[5] ha il tipo dell'elemento anche quando l'indice è fuori intervallo. L'opzione noUncheckedIndexedAccess (non fa parte di strict) aggiunge | undefined a ogni accesso tramite indice, così il compilatore intercetta anche quel caso.