Vue 2 + TypeScript中如何将$refs字段转换为对应组件类型（使用Vue.extend）

解决方法 #

Vue 2 中通过 Vue.extend 定义的组件，要获取其实例类型需要结合 TS 内置的 InstanceType 工具类型使用，具体操作如下：

1. 核心原理

你导入的 ValidPeriod 是组件构造器对象，不是实例类型：

• typeof ValidPeriod 拿到的是组件构造器的类型（也就是报错信息里的 ExtendedVue 类型）
• InstanceType<typeof ValidPeriod> 才能推导出组件的实例类型，包含你定义的所有data、methods字段

2. 最简修复写法

直接修改调用处的类型断言即可，因为 $refs 默认是包含Element、数组的联合类型，需要先转unknown再转目标实例类型，避免类型重叠报错：

// App.vue mounted 中修改为如下写法
(this.$refs.validPeriod as unknown as InstanceType<typeof ValidPeriod>).isValidate()

3. 推荐写法：提前声明$refs类型（避免每次断言）

如果需要多次调用该ref上的方法，可以直接给组件声明$refs的具体类型，后续调用无需重复断言：

<script lang="ts">
import Vue from 'vue';
import ValidPeriod from './ValidPeriod.vue';

// 提前定义组件实例类型，方便复用
type ValidPeriodInstance = InstanceType<typeof ValidPeriod>

export default (Vue.extend({
  components: {
    ValidPeriod,
  },
  data() {
    return {};
  },
  mounted() {
    // 直接调用，TS可正确识别isValidate方法
    this.$refs.validPeriod.isValidate();
  },
// 显式声明$refs的类型
}) as Vue & {
  $refs: {
    validPeriod: ValidPeriodInstance
  }
})
</script>

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