Vue.js 2+TypeScript：如何为ref子组件设置正确类型

问题分析 #

你在父组件中通过ref调用子组件方法时，直接用子组件类型断言仍报错，是因为Vue 2默认的$refs类型为{ [key: string]: Vue | Element | Vue[] | Element[] }，TypeScript无法自动识别子组件的自定义方法。

最优解决方案：显式声明父组件的$refs类型 #

1. 确保父组件正确导入子组件：

import Child from './Child.vue';

2. 在父组件的Class Component中，添加$refs的类型声明：

@Component({
  components: {
    Child
  }
})
export default class Parent extends Vue {
  // 显式指定refs的类型
  $refs!: {
    childRef: Child;
  };

  mounted() {
    // 无需额外断言，直接调用子组件方法
    this.$refs.childRef.testFunction();
  }
}

这种方式让TypeScript明确知道childRef的类型是你的子组件类，能直接识别testFunction方法，是最规范的写法。

关于你自己的解决方案 #

你用Child & { testFunction:() => void }的交叉类型写法虽然能运行，但属于冗余操作——testFunction已经是Child类的成员，不需要额外声明方法类型。这种写法本质是强制覆盖类型推断，不如显式声明$refs类型优雅可靠。

替代方案：直接使用InstanceType断言 #

如果不想显式声明$refs类型，也可以用InstanceType来断言子组件实例类型：

mounted() {
  (this.$refs.childRef as InstanceType<typeof Child>).testFunction();
}

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