vue这段代码不是百分之百懂，可以讲的细点吗？

作者站长头像
站长
· 阅读数 4
declare module '*.vue' {
    import { defineComponent } from 'vue'
    const Component: ReturnType<typeof defineComponent>
    export default Component
}

问题 1 扩展模块的时候 * 是代表所有，那么可以理解正则的写法都支持吗？ 2 泛型里面这种写法感觉好奇怪 typeof defineComponent> 3.ReturnType 为啥没有导入的部分呢？从哪里来

回复
1个回答
avatar
test
2024-07-10

*.vue 不是一个正则写法，就是普通的通配符。它代表了所有以 .vue 结尾的模块。在 TypeScript 中我们通过 import .... from "xxxxxx" 来从模块引入东西，这里 xxxxxx 可能是 ./something.vue，或者 @/comp/xyz.vue …… 那都匹配 *.vue。

defineComponent 是一个函数。在 TypeScript 中由于引入了类型，它会区分“类型”和“值”，类型在转成 JS 之后是会被擦除的东西，而值仍然存在。defineComponent 显然是一个值。但是 TS 的泛型运算（注意 TS 的泛型不是简单的泛型参数那么简单，TS 可以通过基于泛型的类型定义来实现泛型运算）只能使用类型，所以要通过 typeof defineComponent 把这个值的类型找出来。当然，如果你能直接找到 defineComponent 的类型定义，从 "vue" 中引入也可以（可以通过 import type）

ReturnType 是 TS 预定义的类型工具（可以认为是类型运算函数），所以不需要引入。还有很多其他的，可以去看：TypeScript: Documentation - Utility Types (typescriptlang.org)

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容