修复 TypeScript 中导入 vue 文件报错显红

vue 2 的解决办法,针对 vue 文件导入报错

创建一个 shims.d.ts 文件,放置到 src/globalDeclare 中

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

vue 3.0 的解决办法,针对 vue 文件导入报错

vue3.0 中使用上述办法,会使 createApp 与 vue 类型不符合

导致 Vue 类型与 PublicAPIComponent 不符合

因此 vue3 中的声明方法使用以下办法:

declare module '*.vue' {
  import { defineComponent } from 'vue';

  const Component: ReturnType<typeof defineComponent>;
  export default Component;
}

注意,该模块声明需要单独创建文件声明

在 tsconfig.json 中添加

{
    "compilerOptions"{
        "typeRoots"[
            "src/globalDeclare"
        ]
    }
}