忙了一天，眼睛酸了，脑子也转不动了吧？先别急着关电脑！每天花几分钟，跟着我用一道超实用的 TypeScript 面试题，给大脑做个 “轻量 SPA”，既能放松心情，又能偷偷变强，下次面试直接拿捏面试官！最近 “前端面试技巧”“TypeScript 实战” 热度居高不下，今天这道题，专治各种类型判断的 “疑难杂症”，赶紧来瞧瞧！

类型守卫大挑战

出题啦！假设有一个函数，接收一个参数value，这个value可能是字符串、数字，也可能是null。现在要求在函数里准确判断value的类型，并根据不同类型返回不同结果：如果是字符串，返回它的首字母；如果是数字，返回它加 1 后的结果；如果是null，返回字符串'null值'。要用 TypeScript 实现，重点是合理使用类型守卫。

是不是感觉有点懵？类型守卫是 TypeScript 里超重要的 “秘密武器”，在实际开发中经常用到，学会它，写代码就像开了挂！别慌，咱们一步一步拆解，把这道题啃得透透的！

每一行都是小宝藏

// 定义一个函数，接收可能是字符串、数字或null的参数value
function handleValue(value: string | number | null) {
// 使用typeof进行类型判断，这是最基础的类型守卫方式
if (typeof value ==='string') {
// 如果是字符串，返回它的首字母
return value.charAt(0);
}
// 使用严格相等运算符进行判断，这也是一种类型守卫
if (value === null) {
return 'null值';
}
// 经过前面的判断，如果都不满足，那value就只能是数字类型了
return value + 1;
}

先看函数定义，value的类型是string | number | null，这就是咱们常说的联合类型，在实际开发里，处理多种可能的数据类型时，这种类型超常见。

第一重if判断用typeof，这就像给数据 “验明正身”，只要value是字符串，就直接返回首字母，charAt(0)这个方法简单又好用。

第二重if判断用===，专门检查value是不是null，一旦确认，马上返回'null值'。

经过前面两轮筛选，剩下的value就 “原形毕露”，肯定是数字类型啦，直接加 1 返回结果。这整个过程，就是类型守卫在发挥作用，帮咱们把不同类型的数据安排得明明白白！

面试官追问？稳如泰山的回答来了

问题一：为什么要用类型守卫，直接用 typeof 不行吗？

别紧张，笑着回答：“直接用typeof当然可以判断部分类型，但遇到联合类型，只靠typeof就不够用啦。类型守卫就像一套‘组合拳’，除了typeof，还有instanceof、in关键字，以及自定义的类型守卫函数。它们能更精准地缩小类型范围，保证代码逻辑的准确性。比如在刚才的例子里，用typeof判断完字符串，再用===判断null，最后就能确定剩下的是数字，这样代码既清晰又安全。”

问题二：常见的类型守卫有哪些？

自信满满地说：“常见的类型守卫有好几种！typeof用来判断基本数据类型，像string、number、boolean；instanceof主要用于判断对象是不是某个类的实例；in关键字可以检查对象是否包含某个属性；还有自定义类型守卫函数，能根据业务逻辑灵活判断类型。这些类型守卫各有各的用法，掌握了它们，处理复杂类型就轻松多了。”

问题三：使用类型守卫有什么要注意的地方？

淡定应答：“用类型守卫时，一定要保证判断条件全面，别留‘死角’。比如在联合类型里，每种可能的类型都要考虑到，不然就可能出现类型错误。另外，自定义类型守卫函数时，要确保函数的返回值是boolean类型，这样 TypeScript 才能正确推断类型。只要注意这些细节，类型守卫就能成为咱们写代码的得力助手！”

类型守卫 vs 类型断言，谁才是你的心头好？

最后来聊个超有意思的话题！在处理类型问题上，类型守卫和类型断言都很常用。类型守卫就像 “温柔的侦探”，一步步推理出准确类型；类型断言则像 “果断的决策者”，直接告诉编译器按某个类型处理。有人觉得类型守卫严谨又安全，有人偏爱类型断言的简洁高效。你在写代码时，更倾向用哪种方式呢？快来评论区聊聊，说不定能找到 “志同道合” 的小伙伴！

今天的分享就到这儿啦！希望这道题能让你收获满满～觉得有用的话，点个赞、关注一波，每天晚上都有超干货的前端面试题，陪你轻松进阶！