TypeScript null 和 undefined：判空检查与 ?.、?? 运算符

开启 strictNullChecks（它属于 strict 的一部分）后，null 和 undefined 就是各自独立的类型。string 永远不可能是 null；一个可能缺失的值必须在类型中写明，例如 string | null，而 TypeScript 会要求你在使用这个值之前处理这种情况。

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

检查之后，编译器知道 name 是 string，所以可以调用 .split。本页其余部分介绍做这种检查的各种方法，以及让它变得简短的运算符。

strictNullChecks 与“可能为 null”错误

当类型中包含 null 或 undefined 时，TypeScript 拒绝把这个值当作一定存在来使用：

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

undefined 对应的错误是 TS18048：'x' is possibly 'undefined'。没有 strictNullChecks 时，null 和 undefined 可以出现在任何类型中，这段代码能编译通过，然后在 name 第一次为 null 时于运行时因 TypeError 崩溃。这类 bug 正是要保持 strict 开启的主要原因。

日常代码中这些类型的来源：

检查 null 和 undefined

下面每一种检查都会在代码块内收窄类型。根据你想排除的内容选择合适的检查。

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 是唯一一个惯用宽松相等的地方：它只对 null 和 undefined 为真，对其他值都不成立。真值检查会把空字符串也当作缺失，这往往是个 bug。

可选链：?.

如果 a 不是 null 或 undefined，a?.b 就读取 b，否则停下来并返回 undefined。同一个运算符也适用于索引 a?.[i] 和调用 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

bob.address?.city 的类型是 string | undefined：可选链会给结果加上 undefined，所以通常要和 ?? 搭配使用。运行时的行为就是普通 JavaScript；短路求值的细节见 可选链。

双问号：??

除非 a 是 null 或 undefined，否则 a ?? b 返回 a；如果是，就返回 b。它取代了旧的 a || b 写法，后者还会丢弃 0、""、false 和 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

在类型上，?? 从左侧去掉 null 和 undefined，再把剩下的部分和右侧组成联合类型，所以 scores.get("Linus") ?? 0 可以赋值给 number。

空值赋值：??=

只有当 a 是 null 或 undefined 时，a ??= b 才会把 b 赋给 a。它的同类 ||= 和 &&= 分别在左侧为假值或真值时赋值。

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 在 ??= 之后保留下来，而空的 label 被 ||= 替换了。在 opts.retries ??= 3 之后，TypeScript 在函数的其余部分把 opts.retries 收窄为 number。

可选属性与 | undefined

nickname?: string 和 nickname: string | undefined 读取时的类型一样，但区别在于这个键是否必须存在：

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

当调用方可以省略这个属性时用 ?；当你希望每个调用方都显式传入它（即使值是 undefined）时用 | undefined。exactOptionalPropertyTypes 选项（不属于 strict）会让 ? 更严格：此时 nickname?: string 会拒绝 { nickname: undefined }，只接受缺失的键或字符串。可选的函数参数（x?: number）和可选属性的行为一样：在函数内部，x 是 number | undefined。

用 null 还是 undefined

TypeScript 并不强制你选择，但在一个代码库里两者混用，意味着每次检查都要处理两种情况。一种常见的约定：

• 在你自己的类型中，用 undefined（以及可选属性）表示“未设置”。这是 JavaScript 默认产生的值：缺失的属性、省略的实参、find 和 Map.get 没有找到时。
• 在 API 给你 null 的地方接受 null：JSON 没有 undefined，String.prototype.match 和很多 DOM 方法会返回 null。
• 当一个值两者都有可能时，用 == null 检查。

数组索引是唯一的漏洞：即使索引越界，users[5] 的类型也是元素类型。noUncheckedIndexedAccess 选项（不属于 strict）会给每次索引访问加上 | undefined，让编译器连这种情况也能发现。