vue3 提取props定义出现问题原理分析

李恒道 · 发表于 2022-7-14 09:47:24

严重警告

本内容超标我的个人能力极大
不对任何资料和文字的正确性抱有期待！

问题回溯

当我们在props书写定义的时候可以发现有正确的required推断
图片.png

而如果在外部则required推断失效了

查看类型可知是required的类型从boolean变成了true

我们可以通过添加as const来进行一下类型缩窄(type narrow)

那么为什么vue自身能对其进行缩窄？
官方给出的答案是

  // the Readonly constraint allows TS to treat the type of { required: true }
  // as constant instead of boolean.

常量readonly限制允许ts推测{required:true}的类型作为一个常量代替boolean类型

这里我个人理解的话是可能出错了！！！

我们可以编写代码
图片.png

可以看到这时候是一个boolean类型
而如果加一个泛型extends继承语法呢

变成了

关于这个问题是TS的推断
具体可以参考
https://stackoverflow.com/questions/67070250/typescript-class-generic-type-is-too-narrow-if-extends-something-else-is-not
大致意思是如果不加extends，会推断出更通用的类型
如果加了extends，会基于继承的类型尝试推断出来更具体的类型
所以会从boolean直接改为true
注意一点
就是如果我们把一个类型赋值给一个变量
再往参数里传入该变量
此时是执行的检查类型的功能，而不会尝试更具体的去推断类型
那么我们基本了解了prop以及typescript extends type narrow问题