从vue3+TS项目中导入vue组件路径不识别的问题中认识vue3的组合式API中的常用组件

最近在使用vite创建vue3+ts项目时，不经意发现一些小问题，对这些小问题进行深究的时候，

会加深我对vue3的一些新理解

今天碰到的一个问题就是我使用vite创建一个vue3+Ts项目后，看到各处引用 的vue组件路径上一堆红色波浪线（.ts文件无法识别vue组件，但又不影响代码运行）

 

 

随手百度的下，引起的原因也很简单，就是ts需要对类型为vue的组件支持，才能识别，

解决办法：创建一个xx.d.ts的文件， 用ts的模块插件的扩展组件declare module去导入vue的常用组件ComponentOptions来解决这个问题

declare module '*.vue'{
    import { ComponentOptions } from "vue";
    const ComponentOptions: ComponentOptions
    export default ComponentOptions
}

 

再给tsconfig.config.json中的compilerOptions对象添加"strict": true,波浪线就解决啦

可是我想在vue3的API中去读下ComponentOptions组件的解释时，却发现它在最现版的API中已经改名成defineComponent

所以我们代码可以写成这样：

declare module '*.vue' {
        import { DefineComponent } from 'vue';
        const component: DefineComponent<{}, {}, any>;
        export default component;
      }

 

 

：扩展阅读下Vue3中的常用三大组件

1，普通组件defineComponent

2，异步组件defineAsyncComponent

3，defineCustomElement