Vue3迁移时全局$filters在子组件使用报TS(2339)错误，求问题排查

你在main.js里注册全局$filters的写法是对的，报错原因是TypeScript默认不识别这个新增的全局属性，需要补充类型声明来解决：

1. 在项目src目录下创建vue.d.ts类型声明文件（已有则直接修改），添加以下代码：

import type { ComponentCustomProperties } from 'vue'

// 先定义你的过滤器类型，根据实际函数参数和返回值调整
type Filters = {
  datetime: (value: string) => string
  round: (value: number) => number
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $filters: Filters
  }
}

2. 确保tsconfig.json包含该声明文件的扫描路径，示例配置：

{
  "compilerOptions": {
    // 其他配置项...
    "types": ["vue"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

3. 重启TypeScript服务或编辑器，模板中的$filters就会被正确识别，类型错误即可消除。

另外也可以在组件内通过getCurrentInstance()获取全局属性，但这种写法不如类型声明优雅：

import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()!
// 使用 proxy?.$filters.datetime(...)

更推荐第一种类型声明的方式，符合TypeScript类型规范，使用体验和Vue2的全局过滤器一致。

内容的提问来源于stack exchange，提问作者CSharp-n