如何在 TypeScript 中检查 null 和 undefined：陷阱与最佳解决方案

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

引言：为什么“简单的 if (value)”可能会让你失望？

每个从 JavaScript 转向 TypeScript 的开发者，迟早都会遇到这个问题：“有没有办法同时检查 null 和 undefined？”。这个问题在 Stack Overflow 上获得了数千次浏览——这并非偶然。乍一看，任务似乎很简单：写一个 if (value != null) 或 if (value)。但魔鬼，一如既往，藏在细节中。

在本文中，我们将分析新手（甚至不仅仅是新手）在 TypeScript 中检查 null 和 undefined 时常犯的错误。您将了解为什么非严格比较可能比看起来更危险，空值合并运算符 (??) 是如何工作的，以及何时应该使用自定义类型保护。开始吧！

错误 #1：对所有假值使用 `if (!value)`

最常见的反模式是通过取反来检查值是否存在：

// ❌ 不好function processInput(input: string | null | undefined) {  if (!input) {    console.log('输入缺失');    return;  }  console.log(input.toUpperCase());}

processInput(''); // ❌ 输出“输入缺失”，虽然字符串为空，但既不是 null 也不是 undefined

问题在于 !value 会将任何假值转换为 true。在 TypeScript（和 JavaScript）中，假值包括：false、0、''（空字符串）、NaN、null、undefined。如果您的业务逻辑允许空字符串或数字 0，这样的代码就会出错。

如何避免：使用 === 或 !== 对 null 和 undefined 进行严格检查。

错误 #2：盲目信任 `value == null`

许多开发者知道 value == null（双等号）可以同时检查 null 和 undefined。这确实有效：

// ✅ 有效，但是...function check(value: string | null | undefined) {  if (value == null) {    console.log('value 是 null 或 undefined');  }}

然而，TypeScript 中的双等号是不明显 bug 的来源。例如，null == undefined 是 true，但 null == false 是 false。那么 '' == false 呢？也是 true。非严格比较的行为可能难以预测，尤其是在复杂条件下。

如何避免：在 TypeScript 中，value == null 是一种官方允许的模式（linter 通常允许），但对于新手来说，最好坚持显式的方法：value === null || value === undefined。

错误 #3：处理对象时忽略 `undefined`

有时开发者只检查 null，而忘记了 undefined：

// ❌ 危险interface User {  name?: string;  age: number | null;}

function greet(user: User) {  if (user.age !== null) {    console.log(`年龄: ${user.age}`);  }  // 如果 age 未传递（undefined），代码会执行！}

greet({ name: 'Alice' }); // 输出“年龄: undefined”

age 字段可能是 null、number 或 undefined（如果接口中未指定）。仅检查 null 会遗漏 undefined。

如何避免：如果类型允许两者，始终检查这两个值。或者使用可选链运算符 (?.) 和空值合并运算符 (??)。