在vue3🔥源码中学会typescript🦕 - "is"

vue3:fire:是用 typescript 实现的, 所以我认为他的源码是我们学习tyepscript的 最佳实践 , 下面我就用他源码中的实例让大家学会使用typescript的" is "特性.

"is"是用来干什么的?

是一种类型推断表达式的关键字, 通过和函数返回值的比较, 从而"缩小"参数的类型范围.:angry:看完这句话没明白就对了, 想理解这句话什么意思, 请继续看下面的例子, :grin:我保证第一个例子过后你就会明白这句话.

vue在哪里用了"is"

首先教大家一个 vscode 的小技巧, 搜索中我们可以按"正则"搜索, 比如搜索 \): \w+ is 我们就可以找到所有使用了"is"特性的代码.

更多常用正则看这里: https://juejin.im/post/5d245d4151882555300feb77

实例解释

从搜索到的代码中, 我们拿出最有代表性的一个函数说明.

const isString = (val: any): val is string => typeof val === 'string'
复制代码

划重点

可以看见在返回值部分返回的不是类型而是一个表达式" val is string ", 这段代码的意思是当 isString 返回值为 true 的时候, 参数 val 就是 string 类型.

直接返回boolean不行吗?

不行!看下面的代码, 我们虽然知道在 if 判断后aa一定是 string ,但是ts不知道, ts会提示 aa 可能是 null 类型, 不能执行 substring 方法.

所以需要使用 is 特性. ts可以 根据 if 判断推断 出当前的 aastring 类型:

更多"is"在vue3中的实例

// 是否是对象
export const isObject = (val: any): val is Record<any, any> =>
  val !== null && typeof val === 'object'

// 是否ref对象
export function isRef(v: any): v is Ref {
  return v ? v[refSymbol] === true : false
}

// 是否vnode
export function isVNode(value: any): value is VNode {
  return value ? value._isVNode === true : false
}

// 是否插槽节点
export const isSlotOutlet = (
  node: RootNode | TemplateChildNode
): node is SlotOutletNode =>
  node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT
复制代码

更多例子, 可以在源码中搜索 \): \w+ is , 大概有16条类似的代码.

通过总结我们发现, " is "主要都是应用在类型判断函数上, 让后续逻辑判断中可以正确的推断出参数的类型, 好了现在可以在回头看开头的解释" is是一种类型推断表达式的关键字, 通过和函数返回值的比较, 从而"缩小"参数的类型范围. ", 现在是不是已经理解了呢.

总结

喜欢ts, 如果你也喜欢ts的话可以看我之前写的ts基础文章.

第一课, 体验typescript

第二课, 基础类型和入门高级类型

第三课, 什么是泛型?

第四课, 解读高级类型

第五课, 命名空间(namespace)是什么?

平时还请大家多多练习, 祝早日熟练ts, 放2个我用ts写的项目当做参考, 抛砖引玉, 加油!

:hand: 移动/pc端手势库, 支持: tap/press/pan/swipe/rotate/pinch github.com/any86/any-t…

:lollipop: 把vue组件变成this.$xxx这样的命令 github.com/any86/vue-c…

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章