Vue3(Vite+TS)中vue-prism-component声明文件缺失且@types包不存在求助

问题场景 #

使用Vue3组合式API、Vite和TypeScript开发时，引入vue-prism-component组件出现类型声明缺失报错，且官方维护的@types/vue-prism-component包不存在。

组件引入代码 #

<script lang="ts" setup>
import 'prismjs'
import 'prismjs/themes/prism-tomorrow.css'
import Prism from 'vue-prism-component'
</script>

类型报错提示 #

Could not find a declaration file for module 'vue-prism-component'. '/Users/haotranhuynhhuy/Desktop/Vuejs/jarvis 2.0/node_modules/vue-prism-component/dist/vue-prism-component.common.js' implicitly has an 'any' type.
Try npm i --save-dev @types/vue-prism-component if it exists or add a new declaration (.d.ts) file containing declare module 'vue-prism-component';
3 import Prism from 'vue-prism-component'

安装@types包失败的报错 #

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvue-prism-component - 未找到
npm ERR! 404  '@types/vue-prism-component@*'不在此注册表中。
npm ERR! 404 请注意，您也可以从tarball、文件夹、http url或git url安装。
npm ERR! 本次运行的完整日志可在以下位置找到：
npm ERR!     /Users/haotranhuynhhuy/.npm/_logs/2022-12-16T07_22_15_496Z-debug-0.log

解决方案：手动添加类型声明文件 #

1. 在项目src目录下创建types文件夹（若已存在则跳过）
2. 在types文件夹中新建vue-prism-component.d.ts文件，写入以下内容：

declare module 'vue-prism-component' {
  import type { DefineComponent } from 'vue'
  const Prism: DefineComponent<{
    // 组件常用Props，可根据实际使用场景补充
    code?: string
    language?: string
  }>
  export default Prism
}

3. 检查项目根目录的tsconfig.json，确保include数组包含类型文件路径：

{
  "compilerOptions": {
    // 项目原有配置
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/types/**/*.d.ts"
  ]
}

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