Vue 3 + Laravel项目中创建.d.ts文件解决vue-editor-js类型报错

问题背景 #

使用Vue3 + Laravel8开发项目，已通过npm安装vue-editor-js包，在app.js中导入组件时：

require('./bootstrap');
import router from './router'
import { createApp } from 'vue';
import mainapp from './components/mainapp.vue';
import common from './common'
import store from './store'
import Editor from 'vue-editor-js/src/index'


createApp({
    components: {
        mainapp,
        
        },
    
}).use(router).use(store).use(ViewUIPlus).use(Editor).mixin(common).mount('#app');

触发TypeScript类型错误：

Could not find a declaration file for module 'vue-editor-js/src/index'. 'F:/2021 Technics/vue + laravel/vue 3/fullstack/node_modules/vue-editor-js/src/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/vue-editor-js if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-editor-js/src/index';

解决步骤 #

1. 在项目的前端源码目录（Laravel项目一般为resources/js）下创建文件vue-editor-js.d.ts
2. 打开该文件，写入以下内容：

declare module 'vue-editor-js/src/index';

3. 确认项目的tsconfig.json配置中，include数组包含了该声明文件的路径。如果没有自定义配置，默认会自动识别目录下的.d.ts文件；如果需要手动配置，可修改tsconfig.json：

{
  "include": [
    "resources/js/**/*",
    "resources/js/*.d.ts"
  ]
}

4. 重启开发服务器（如npm run dev或php artisan serve），错误即可消除。

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