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