vue3+ts项目添加提示文件并在vue和ts文件中提示

在TS项目中使用.d.ts文件声明Vue的$bus事件总线,

最新推荐文章于 2025-06-26 10:34:02 发布

原创最新推荐文章于 2025-06-26 10:34:02 发布 · 931 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #typescript

vue3 专栏收录该内容

3 篇文章

订阅专栏

在TypeScript项目中，我们常常使用.d.ts文件来声明全局变量，例如为Vue实例添加$bus属性。这涉及到导入mitt库的EventType和Emitter类型，并扩展ComponentCustomProperties接口。尽管在TS文件中已有类型提示，但Vue文件可能仍显示为any。解决这个问题需要在入口文件（如App.vue）中引入.d.ts文件。

在ts项目中，我们通常会加入.d.ts文件来声明变量，比如使用

app.config.globalProperties.$bus = globalEvent;

来在vue上挂载事件总线，然后在.d.ts文件中声明$bus

import { EventType } from 'mitt';
import { Emitter } from 'mitt';
import { ComponentCustomProperties } from '@vue/runtime-core';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    /**
     * 事件总线
     */
    $bus: Emitter<Record<EventType, unknown>>;
  }
}

通过配置tsconfig.json中的include属性来引入.d.ts文件，此时我们会发现在ts文件中已经成功有提示了，但在vue文件中还是any，此时，我们需要在入口vue文件，一般为App.vue中将.d.ts文件引入即可