TypeScript null 和 undefined 怎么处理

在写代码的时候，你有没有遇到过这种情况：明明给变量赋了值，运行后却突然跳出“null”或“undefined”的错误提示？比如想打印用户的昵称，结果只拿到了一个空值，页面上直接露出一片空白。这两个值虽然看起来都是“空”，但在TypeScript里的区别可不小，处理方式也完全不同。

先搞懂：null和undefined到底啥不一样？

很多人会把这两个值混为一谈，其实它们的“身份”完全不同。举个生活化的例子：你订了一杯奶茶，商家说“没货了”，这是商家主动告诉你“不存在这个商品”，对应null；要是你查订单，发现根本没下过这个奶茶的单，那这个订单就是“没定义”，对应undefined。

TypeScript里，undefined是系统默认给未赋值变量的初始值——比如你声明了let userName; 没给值，它自动就是undefined。而null是手动给的“空值”，一般是你想明确告诉代码“这个位置现在没有值，我之后会补上”，比如获取用户地址时，用户还没填，就设成null。

为啥要认真处理这俩空值？

别小看这俩值，它们是代码bug的重灾区。比如你做一个购物车，要计算商品总价，要是某件商品的价格是undefined，直接加进去就会变成NaN（非数字），整个总价就乱了。还有一次我写登录功能，把用户的可选昵称设成null，结果没判断这个值，直接渲染到页面上，竟出现了“null”这四个黑字，特别突兀。

更关键的是，TypeScript的类型检查会揪出这种问题。要是你没处理空值，它会直接报错，逼你提前补全逻辑，避免线上出问题。

简单处理的3个实用方法

处理空值不用搞复杂，记住这几个生活化的小技巧就够了。

第一个，给空值设默认值。还是刚才的昵称例子，要是用户没填，别直接用null或undefined，给个默认值就行。比如：const displayName = userName ?? "匿名用户"; 这里的“??”就是专门处理空值的，只有当userName是null或undefined时，才会用后面的“匿名用户”。要是用普通的“||”也可以，但它会把0、空字符串当成空值，比如用户昵称填了“0”，“||”会替换成默认值，就错了，所以“??”更靠谱。

第二个，提前判断再用值。要是你不确定变量会不会是空，先检查一下就不会出错。比如要发送用户的收货地址，得先确认地址不是空：if (userAddress !== null && userAddress !== undefined) { sendOrder(userAddress); } 要是嫌写两个判断麻烦，还能直接用if (userAddress)，只要地址不是空、不是0、不是空字符串，就会正常执行，适合简单场景。

第三个，用可选链简化判断。要是你要访问深层对象的属性，比如user.info.address.city，要是中间某一层是null或undefined，直接访问会报错。这时候加个“?”就行：user?.info?.address?.city，这样只要前面某一层是空，后面就不会执行，直接返回undefined，不会崩代码。

新手别踩的小坑

最后提醒两个容易错的点：一是别随便用“==”判断空值，比如null == undefined是对的，但null === undefined就不对，因为它们的类型不一样，用“==”会把其他假值（比如空字符串）也当成空，容易误判。二是别过度处理，要是你明确某个变量肯定不会是空，比如后台返回的商品价格，就不用反复判断，不然代码会变冗余。

其实处理null和undefined的核心，就是搞清楚它们“主动空”和“未定义”的区别，再结合默认值、判断和可选链，就能避开大部分空值bug，让代码跑起来更稳。