ts扩展声明vue全局属性

1.问题来源

我是通过vuecli创建的项目,技术栈为ts+vue3,因为项目多处用到格式化utc时间,所以我想加个全局属性方便自己使用:

export function registerProperties(app: App) {
  app.config.globalProperties.$filters = {
    formatDate(value: string) {
      return formatUtcString(value)
    }
  }
}

使用只需要要:

{{ $filters.formatDate(utcString) }}

注册好$filters这个全局属性后,项目是可以正常运行,但是ts检测一直报错,说我...类型上不存在$filters这属性。于是我就看文档,搜解决办法。

2.解决办法

我们需要扩展一下vue中的模块,而vue正好暴露了一个帮助我们拓展模块ComponentCustomProperties。我们需要在src下创建.ts 或 .d.ts文件,然后在里面扩展类型ComponentCustomProperties,ts会合并其中的声明,就好像它们在与原始文件相同的文件中声明一样。这里我是在src目录下创建的vue.d.ts文件。

// 扩展全局属性类型
declare module 'vue' {
  interface ComponentCustomProperties {
    $filters: {
      formatDate: (value: string) => nay
    }
  }
}
export {}

做完这个步骤后,就可以在template中随意用$filters这个全局属性了,还有代码提示。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值