vue-property-decorator类式子组件方法调用TS类型报错如何解决？

报错根因 #

你当前的类型断言写法错误：typeof Child 拿到的是 Child 组件的构造函数类型，而非组件实例的类型，因此无法识别到实例上定义的 func 方法。

无需额外定义接口的解决方案 #

方案1：使用TS内置InstanceType工具类做类型断言 #

TS 内置的 InstanceType 可以直接提取类的实例类型，无需额外编写接口，仅需修改父组件中的类型断言即可：

// parent.vue 中修改调用逻辑
(this.$refs.child as InstanceType<typeof Child>).func()

这是成本最低的解决方案，完全复用现有组件的类型推导，不需要新增任何额外类型定义。

方案2：在父组件内声明$refs的具体类型 #

如果当前父组件内有多个子组件ref，可直接在类内部声明$refs的字段类型，不需要额外导出/引入外部接口：

import { Vue } from 'vue-property-decorator'
import Child from './child.vue'

export default class Parent extends Vue {
  // 新增这行声明$refs的字段类型，直接用导入的Child作为实例类型
  $refs: {
    child: Child
  }

  public create (): void {
    // 无需额外类型断言，TS可自动识别类型
    this.$refs.child.func()
  }
}

补充说明：你提供的 parent.vue 示例代码存在语法疏漏，export default Parent extends Vue 漏写了 class 关键字，正确写法为 export default class Parent extends Vue。

内容的提问来源于stack exchange，提问作者thousands_sun