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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值