TypeScript项目引入JS版Vue组件报找不到模块或对应类型声明如何解决？

问题根因 #

报错为TypeScript无法识别JS编写的Vue单文件组件的类型，核心有两个触发原因：

1. 你已开启allowJs配置，但tsconfig.json的include字段未匹配JS/JSX后缀文件，TypeScript不会主动扫描未纳入包含范围的JS文件
2. 缺少全局Vue组件类型声明，TypeScript无法自动推导JS编写的.vue文件的导出类型

永久修复方案（无需修改原模板代码，模板更新后仍生效） #

方案1：全局适配（推荐，一劳永逸适配所有JS组件） #

1. 修改tsconfig.json的include配置，添加JS/JSX文件匹配规则：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "src/**/*.jsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ]
}

2. 在src目录下新建全局类型声明文件shims-vue.d.ts，内容如下：

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

方案2：指定组件适配（性能更优，仅适配需要的组件） #

如果不想扩大TypeScript扫描范围，可单独为第三方模板组件做类型声明：
在src目录下新建types/external-components.d.ts文件，内容如下：

declare module '@/components/TroubledComponent' {
  import Vue from 'vue'
  export default Vue
}

后续新增其他模板JS组件时，只需在该文件中新增一行对应模块的声明即可，完全不需要修改原模板代码。

额外说明 #

你之前添加的declaration、emitDeclarationOnly等配置作用是生成你自身TS代码的类型声明文件，对引入外部JS组件的识别无帮助，若无生成类型文件的需求可以删除，避免生成多余的dist目录文件。

内容的提问来源于stack exchange，提问作者orezvani