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这个全局属性了,还有代码提示。