Vue3 + TypeScript下EventBus（mitt）无法识别问题求助

问题根源 #

你遇到的TS2339错误，本质是TypeScript无法识别挂载到Vue全局属性上的emitter，类组件的类型定义里没有这个属性的声明。

分步解决 #

1. 声明全局属性的TS类型 #

在项目src目录下新建types/vue.d.ts文件，补充全局属性的类型声明：

import type { Emitter } from 'mitt'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    // 对应你挂载到全局的属性名，推荐用$emitter区分全局属性
    $emitter: Emitter<any>
  }
}

// 确保TS能识别该类型文件
export {}

2. 修正main.ts的挂载逻辑 #

用mitt创建emitter后，正确挂载到Vue全局属性：

import { createApp } from 'vue'
import mitt from 'mitt'
import App from './App.vue'

const emitter = mitt()
const app = createApp(App)
// 挂载到全局属性，命名为$emitter避免冲突
app.config.globalProperties.$emitter = emitter
app.mount('#app')

3. 类组件中的正确调用方式 #

如果使用vue-class-component或vue-property-decorator，直接通过this访问即可（类型声明生效后TS会自动识别）：

import { Component, Vue } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  sendEvent() {
    this.$emitter.emit('test-event', { data: 'hello' })
  }

  mounted() {
    this.$emitter.on('test-event', (payload) => {
      console.log(payload)
    })
  }

  beforeUnmount() {
    // 解绑事件避免内存泄漏
    this.$emitter.off('test-event')
  }
}

4. 检查tsconfig.json配置 #

确保自定义类型文件被TS扫描到：

{
  "compilerOptions": {
    "types": ["node", "vue"],
    "typeRoots": ["./node_modules/@types", "./src/types"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

替代方案：直接导出mitt实例 #

如果挂载全局属性的方式仍有问题，可以直接创建独立的eventBus文件，在组件中导入使用：

// src/utils/eventBus.ts
import mitt from 'mitt'
const emitter = mitt()
export default emitter

类组件中使用：

import { Component, Vue } from 'vue-property-decorator'
import emitter from '@/utils/eventBus'

@Component
export default class HelloWorld extends Vue {
  sendEvent() {
    emitter.emit('test-event', { data: 'hello' })
  }

  mounted() {
    emitter.on('test-event', (payload) => {
      console.log(payload)
    })
  }

  beforeUnmount() {
    emitter.off('test-event')
  }
}

这种方式无需修改全局类型，TS会直接识别，更适配类组件场景。

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