以下是针对初学者的 TypeScript 中对 null/undefined 和比较运算符（==/===/!=/!==）的核心解析及建议用法，结合代码示例和最佳实践说明：
⚫ 一、null 和 undefined 在 TypeScript 中的处理
1. 核心区别
-
undefined-
含义：变量已声明但未赋值，或访问对象不存在的属性时自动产生。
-
示例：
let a; // a 为 undefined let obj = {}; obj.name; // 返回 undefined
-
-
null-
含义：开发者主动设置的空值（如清空对象引用）。
-
示例：
let user = null; // 显式赋空值
-
2. TypeScript 的严格空检查（strictNullChecks）
开启此选项后（tsconfig.json 中设置 "strictNullChecks": true）：
-
null/undefined不能随意赋值给其他类型变量。 -
必须显式处理可能的空值，否则编译报错：
let name: string; name = null; // 错误：Type 'null' is not assignable to type 'string' -
类型需明确声明可能为空：
let age: number | null = null; // 合法
🔁 二、比较运算符：==/===/!=/!==
1. 宽松相等（==/!=）
-
行为：比较前自动转换类型，易导致意外结果。
-
问题示例：
console.log(5 == "5"); // true（字符串转数字） console.log(null == undefined); // true（特殊规则）
2. 严格相等（===/!==）
-
行为：不转换类型，要求值和类型均相同。
-
安全示例：
console.log(5 === "5"); // false（类型不同） console.log(null === undefined); // false（类型不同）
3. TypeScript 的建议
-
始终优先使用
===和!==：- 避免隐式类型转换的陷阱，符合 TypeScript 类型安全理念。
- 仅在需兼容
null == undefined的特殊场景使用==（极少见）。
🛠️ 三、TypeScript 的空值处理工具
1. 可选链（?.）
-
作用：安全访问深层属性，遇空则短路返回
undefined。interface User { address?: { city?: string } } const user: User = {}; console.log(user.address?.city); // 输出 undefined，不报错
2. 空值合并（??）
-
作用：为
null/undefined提供默认值，避开其他假值（如0/""）。const input = undefined; const value = input ?? "default"; // "default"
3. 非空断言（!）
-
作用：强制告诉编译器“此值非空”，但需谨慎使用（运行时可能报错）。
function getName(user?: User) { return user!.name; // 断言 user 存在（实际可能为空） }
4. 类型守卫
-
显式检查空值：
function greet(name: string | null) { if (name === null) return "Hello, guest!"; return `Hello, ${name.toUpperCase()}!`; // 此处 name 为 string } -
自定义守卫函数：
function isDefined<T>(value: T | null | undefined): value is T { return value !== null && value !== undefined; }
💎 四、最佳实践总结
| 场景 | 推荐做法 | 避免操作 | |
|---|---|---|---|
| 空值声明 | 明确类型：`let x: string | null = null;` | 关闭 strictNullChecks |
| 比较操作 | 一律用 ===/!== | 使用 ==/!=（除非特殊需求） | |
| 深层属性访问 | 用 ?. 替代 if 嵌套：obj.a?.b?.c | 直接访问 obj.a.b.c（可能报错） | |
| 默认值设置 | 用 ?? 替代 ` | ||
| 确信非空时的类型断言 | 仅在逻辑确保非空时用 ! | 滥用 ! 导致运行时崩溃 |
黄金法则：
- 开启
strictNullChecks：从编译阶段拦截空值错误。- 多用
?.和??：简化代码并提升安全性。- 禁用
==：除非明确需要null == undefined的特性。
💻 五、代码示例对比
// 安全访问 + 默认值
const city = user.address?.city ?? "Unknown";
// 严格比较 + 类型守卫
if (userId !== null && userId !== undefined) {
fetchUser(userId); // userId 为 string
}
// 危险的非空断言（慎用！）
const unsafeName = user!.name; // 需100%确保 user 非空
初学者按此实践可避免 90% 的空值相关错误！🚀 更多细节可参考 TypeScript 官方文档或相关技术博客。
