- 本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。
- 这是源码共读的第2期，链接：juejin.cn/post/708499…
这期来聊聊vue3源码中的shared工具库。
在阅读vue3过程中，会有很多边界情况的判断以及处理，我们一般只关注核心实现逻辑，这些边界情况，只要不影响主流程就跳过。但是其实工具库中也有很多小细节值得学习。
我们主要看index.ts文件，其余的是对vue模板，标识符，属性的处理，今天暂时跳过，后续也会讲。
1.TS类型判断
先来看这样一段代码，参数是string或者number,如果是strng则截取2位，如果是number则保留2位小数。
function test(str: number | string): void {
if (typeof str === 'string') {
str.slice(0, 2)
} else {
str.toFixed(2)
}
}
这么写当然没有问题，但是如果有很多函数，都需要判断，就有点冗余了，对吧。
我们把类型判断提取成一个函数。
const checkString = (val: any): boolean => typeof val === 'string'
function test(str: number | string): void {
checkString(str) ? str.slice(0, 2) : str.toFixed(2)
}
代码变成上面这样，看着没啥问题，对吧，但是ts提示str还是number或者string。
我们知道，类型已经做了判断了，这段代码肯定是没有问题的，对吧。
但是ts不知道。
因为我们的类型判断返回的是一个boolean类型，他的返回值不足以让ts推导出参数的类型。
我们可以看一下vue源码中是怎么实现的。
在vue中返回的并不是boolean类型，而是val is string，通过is进行类型保护，将参数类型限制为string。
2.类型判断
类型判断是一个老生常谈的东西了，应该是如今前端必备的知识点了。
使用typeof判断类型不准确，vue中使用的也是Object.prototype.toString的方法。
说几个有意思的类型判断。
1.是否是promise
2.Object.is判断值是否有更改
3.首字母大写
还有很多其他类型的判断，大家感兴趣的可以自己去看看。
3.总结
如果阅读源码有困难，不妨从这些简单的工具库开始，一样能学到很多细节的东西。
类型判断很多人都会写，但是很多细节可能考虑不到。
把这些细节完善好，也是收获满满的一天。
