TypeScript对 null/undefined/==/===/!=/!== 等概念的支持，以及建议用法

以下是针对初学者的 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（可能报错） |
| ​​默认值设置​​ | 用 ?? 替代 ` | |
| ​​确信非空时的类型断言​​ | 仅在逻辑确保非空时用 ! | 滥用 ! 导致运行时崩溃 |

​​黄金法则​​：

1. ​开启 strictNullChecks​：从编译阶段拦截空值错误。
2. ​多用 ?. 和 ??​：简化代码并提升安全性。
3. ​禁用 ==​ ：除非明确需要 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 官方文档或相关技术博客。