Vue3 defineComponent组件内如何定义$refs类型避免频繁类型转换

实现方案 #

在Vue3的Options API写法中，可以通过TypeScript的ThisType扩展组件实例的this上下文类型，提前声明$refs的结构，后续使用时无需重复做类型断言，代码示例如下：

<template>
  <MyCmp ref="myForm" @click="onClickButton" />
</template>

<script lang="ts">
import { defineComponent, ThisType } from "vue";
import MyCmp from "@/MyCmp.vue";

// 声明当前组件的实例上下文类型，仅需声明自定义扩展的$refs结构即可
interface CustomComponentContext {
  $refs: {
    myForm: InstanceType<typeof MyCmp>
  }
}

export default defineComponent({
  name: "App",
  components: {
    MyCmp,
  },
  methods: {
    onClickButton() {
      // 直接使用即可，TS会自动识别myForm为MyCmp组件实例类型，无需额外断言
      const myForm = this.$refs.myForm;
      console.log(myForm);
    },
  },
// 通过类型断言注入自定义上下文类型
} as ThisType<CustomComponentContext & InstanceType<typeof defineComponent>>);
</script>

补充说明 #

• 这里使用InstanceType<typeof MyCmp>来获取组件实例类型，和你原写法中的typeof MyCmp效果一致，写法更符合TS类型规范
• 如果你使用的是<script setup>语法糖，实现更简单，直接给ref变量指定泛型即可：

  import MyCmp from "@/MyCmp.vue";
  const myForm = ref<InstanceType<typeof MyCmp> | null>(null);
  

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