TypeScript 可选链怎么用

我们在写代码的时候，经常会遇到“不知道某个属性或者方法存不存在”的情况。比如你要做一个显示用户信息的功能，用户可能是刚注册的新用户，还没填过地址，这时候如果直接读取“user.address.city”，就会因为“address”是 undefined，弹出一个报错，整个页面就卡住了。

以前我们解决这种问题，会写好几层判断，比如先检查“user 是不是存在”，再检查“user.address 是不是存在”，最后再取“city”。这样的代码又长又乱，就像出门找朋友，得先确认家门有没有锁，再确认朋友在不在家，才能问朋友要钥匙，多绕了好几圈。而 TypeScript 的可选链，就像是给这段路装了个“自动跳过障碍”的通道，遇到不存在的部分直接返回 undefined，不会卡住后面的代码。

最常用的：对象属性的可选链

假设你正在做一个商品详情页，要读取商品的“分类名称”，但有些商品还没设置分类。用可选链的话，只需要在可能不存在的属性前面加一个“?”就可以了。

比如不用可选链的写法：

`typescript

// 先判断商品、商品分类都存在，才取名称

const categoryName = product && product.category && product.category.name;

`

这段代码要写三遍判断，很容易漏。用可选链的话，就简化成：

`typescript

// 只要中间有一个部分不存在，就返回 undefined，不会报错

const categoryName = product?.category?.name;

`

是不是一下子就简洁了？这里的“?”就是告诉 TypeScript：“如果前面的对象不存在，就别继续往下找了，直接返回 undefined 就好”。

除了属性，函数和数组也能用

可选链不只是能用在对象属性上，你要调用的函数可能不存在、要取的数组元素可能不存在，都能派上用场。

比如做一个用户操作按钮，有些旧用户可能没绑定“发送验证码”的方法，用可选链调用方法：

`typescript

// 如果 sendVerifyCode 这个方法存在，才执行它，不然就不做任何操作

user?.sendVerifyCode?.();

`

这里第二个“?”是因为“sendVerifyCode”是 user 的一个属性，得先确认这个属性存在，再调用它，所以要加两个“?”，就像先确认朋友在家，再问他能不能帮你开门，不能直接喊“开门”。

再比如做一个购物车列表，有些用户的购物车可能是空的，要取第一个商品：

`typescript

// 如果购物车存在，且第一个元素存在，就返回商品，不然就是 undefined

const firstItem = shoppingCart?.[0];

`

这里的“[0]”是数组的索引，加“?”就是告诉 TypeScript：“如果购物车是空的，就别取元素了，直接返回 undefined”。

注意：可选链不是“万能开关”

虽然可选链很方便，但它不能随便用。比如你要给一个不存在的对象赋值，用可选链就会出问题。比如想给“user.address.city”赋值，但如果“user”不存在，用“user?.address.city = '北京'”，这行代码根本不会生效，因为可选链遇到不存在的部分就会跳过，不会做赋值操作。这时候还是得用原来的判断写法，比如“if (user && user.address) user.address.city = '北京'”。

简单来说，可选链就是帮我们省掉反复判断的麻烦，让代码更干净，不用再因为某个小属性没定义就卡住整个功能。只要记得它的规则：遇到可能不存在的部分加“?”，只用来“读取”或者“调用”，别用来“赋值”，就能用好它了。