declare module '*.vue' {
import { defineComponent } from 'vue'
const Component: ReturnType<typeof defineComponent>
export default Component
}
问题
1 扩展模块的时候 * 是代表所有,那么可以理解正则的写法都支持吗?
2 泛型里面这种写法感觉好奇怪 typeof defineComponent>
3.ReturnType 为啥没有导入的部分呢?从哪里来
*.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)