```html

告别“对象可能未定义”！TS可选链与空值合并实战指南

作为JavaScript的超集，TypeScript最迷人的能力莫过于用类型系统提前扼杀运行时错误。但面对嵌套对象和异步数据时，“Object is possibly 'undefined'”这类错误仍是高频痛点。今天我们就用两个ES2020神技——可选链（Optional Chaining）和空值合并（Nullish Coalescing），彻底解决这个开发拦路虎。

一、痛点场景：深掘嵌套对象的恐惧

当我们处理API返回的嵌套JSON或DOM操作时，常需这样防御性编码：

// 传统安全写法（代码冗余）
const userName = (user && user.profile && user.profile.name) || '匿名';

// TS仍会警告: Object is possibly 'undefined'
const email = user.profile.contact.email;

即便用if层层守护，代码可读性也急剧下降...

二、实战利器：可选链（?.）

TypeScript 3.7+原生支持的新语法，遇到null/undefined时立即停止执行并返回undefined：

// 安全访问深层属性
const email = user?.profile?.contact?.email; // 自动避开undefined陷阱

// 同样适用于函数调用
api.getUser?.().then(...); // 仅当getUser存在时才调用

核心优势：代码量减少40%，逻辑路径清晰可见
TS类型推导：结果自动联合undefined类型（如 string | undefined）

三、黄金搭档：空值合并（??）

当遇到null/undefined时提供默认值，比||更精准（避免0/false被覆盖）：

// 传统逻辑或的陷阱
const fontSize = settings.fontSize || 14; // 若fontSize=0会被错误覆盖

// 空值合并精准保护
const fontSize = settings.fontSize ?? 14; // 仅对null/undefined生效

// 联合可选链使用
const title = document.querySelector('#title')?.textContent ?? '默认标题';

四、最新动态：TypeScript 5.0的优化

2023年发布的TS 5.0进一步优化了可选链的类型收窄：

function validate(user?: User) {
  // 可直接在条件判断中使用可选链
  if (user?.age > 18) { 
    // 此处TS自动识别user已定义！
    console.log(user.name); 
  }
}

五、实战案例：安全处理API响应

interface ApiResponse {
  data?: {
    items?: Array<{ name: string }>
  }
}

// 传统写法需要4层防护
const firstItemName = res.data && res.data.items && res.data.items[0] && res.data.items[0].name;

// 现代TS一行搞定
const firstItemName = res.data?.items?.[0]?.name ?? '无数据';

结语

可选链（?.）与空值合并（??）这对组合拳，已成为TypeScript现代开发的必备技能。它们不仅能消除恼人的“undefined”错误，更能让代码保持简洁优雅。下次遇到嵌套对象时，不妨放手让TS的新特性为你保驾护航！

```