如何在Vue+TypeScript中为泛型组件声明ref？

针对你遇到的Vue3泛型组件Ref类型标注问题，以下是几种正确的解决方式：

方案1：指定泛型参数后的实例类型标注 #

这是最直接的方案，利用InstanceType并传入组件泛型的具体类型：

<template>
    <test-generic-comp :data="''" ref="comp"></test-generic-comp>
</template>
<script setup lang="ts">
import TestGenericComp from '../components/TestGenericComp.vue';

// 为泛型组件指定具体的泛型参数（此处为string），再取实例类型
const comp = ref<InstanceType<typeof TestGenericComp<string>> | null>(null);

// 调用时建议使用可选链避免空值报错
comp.value?.func("Hi");
</script>

为什么之前的InstanceType用法报错？ #

typeof TestGenericComp是一个泛型组件工厂函数，而非直接的构造函数类型。必须传入具体的泛型参数（如string），才能得到符合InstanceType约束的构造类型，否则TypeScript无法推断出实例的具体类型。

方案2：手动导出并复用暴露的类型 #

如果需要在多个地方复用组件暴露的方法类型，可以在泛型组件中手动定义并导出暴露接口：

修改TestGenericComp.vue：

<template></template>
<script setup lang="ts" generic="T">
defineProps<{
    data: T;
}>();
function func(obj: T) {
    console.log(`Hello ${obj}`);
}
defineExpose({ func });

// 导出暴露的类型
export type TestGenericCompExposed<T> = {
  func: (obj: T) => void;
};
</script>

然后在About.vue中使用：

<template>
    <test-generic-comp :data="''" ref="comp"></test-generic-comp>
</template>
<script setup lang="ts">
import TestGenericComp, { TestGenericCompExposed } from '../components/TestGenericComp.vue';

const comp = ref<TestGenericCompExposed<string> | null>(null);

comp.value?.func("Hi");
</script>

常见错误分析 #

• 使用ref<typeof TestGenericComp>：该类型指向的是组件的工厂函数，而非组件实例，因此无法访问实例上暴露的func方法。
• 直接使用ref()：虽然能运行，但类型退化为any，失去了TypeScript的类型校验能力。

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