vue3中正确设置ref获取的组件ts类型

在日常开发中，肯定会遇到需要使用ref来获取组件实例的情况：

<template>
  <div class="test">
    <MyDialog ref="MyDialogRef"/>
  </div>
</template>

<script setup lang="ts">
import MyDialog from "./MyDialog.vue";

const MyDialogRef = ref();
</script>

如果只是这样写，我们获取的ref组件实例是一个any类型，如果子组件通过defineExpose对外抛出了接口，显然在父组件中是没法感知到的，为此我们需要一个准确的类型。

利用vue官方提供的InstanceType类型来准确识别组件类型：

<template>
  <div class="test">
    <MyDialog ref="MyDialogRef"/>
  </div>
</template>

<script setup lang="ts">
import MyDialog from "./MyDialog.vue";
import type { InstanceType } from "vue";

const MyDialogRef = ref<InstanceType<typeof MyDialog | null>>(null);
</script>

此时就可以准确获取到组件类型了。