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

梦落飞雪

于 2023-04-13 09:30:48 发布

阅读量886

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： vue.js 前端 typescript

本文链接：https://blog.youkuaiyun.com/qq_39157025/article/details/130122264

vue3 专栏收录该内容

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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文件引入即可