Vue3递归组件中如何正确为useTemplateRefsList添加类型？

针对你在Vue3组合式API递归组件中，无法为useTemplateRefsList指定当前组件实例类型的问题，以下是几种可行的解决方法：

方法1：利用组件自引用类型（推荐，精准且无冗余） #

TypeScript 4.5+支持模块自引用类型，可以直接在组件内部通过import()获取当前组件的构造函数类型，再通过InstanceType推导实例类型：

// toto.vue
<template>
  {{ data.name }}
  <toto 
   v-for="item in data.children"
   ref="childRefs"
   :key="item.id"
   :data="item"
  />
</template>

<script setup lang="ts">
import { useTemplateRefsList } from '@vueuse/core';

const props = defineProps<{
  id: string;
  name: string;
  children?: Array<{
    id: string;
    name: string;
    children?: Array<typeof props>;
  }>
}>();

// 定义当前组件的实例类型：通过模块自引用获取组件构造函数，再推导实例类型
type TotoInstance = InstanceType<typeof import('./toto.vue').default>;

// 为useTemplateRefsList指定类型
const childRefs = useTemplateRefsList<TotoInstance>();

// 测试类型：此时childRefs.value[0]会拥有当前组件实例的完整类型
const testRef = childRefs.value[0];
if (testRef) {
  console.log(testRef.id); // 类型推导正确，不会报错
}
</script>

这种方法无需额外定义接口或暴露属性，直接利用TypeScript的模块自引用特性，精准获取当前组件的实例类型，解决了递归组件的类型循环引用问题。

方法2：通过defineExpose定义实例接口（适合需要明确暴露成员的场景） #

如果需要明确组件对外暴露的属性/方法，可以用defineExpose定义，再提取暴露的类型：

// toto.vue
<template>
  {{ data.name }}
  <toto 
   v-for="item in data.children"
   ref="childRefs"
   :key="item.id"
   :data="item"
  />
</template>

<script setup lang="ts">
import { useTemplateRefsList } from '@vueuse/core';
import type { ComponentPublicInstance } from 'vue';

const props = defineProps<{
  id: string;
  name: string;
  children?: Array<{
    id: string;
    name: string;
    children?: Array<typeof props>;
  }>
}>();

// 定义组件对外暴露的成员
defineExpose({
  id: props.id,
  name: props.name,
  // 可以添加需要外部访问的方法，比如：
  logName() {
    console.log(props.name);
  }
});

// 提取暴露的类型
type TotoExposed = ExposeProxy<typeof instance>;
// 组合成完整的实例类型
type TotoInstance = ComponentPublicInstance & TotoExposed;

// 指定类型
const childRefs = useTemplateRefsList<TotoInstance>();

// 测试：可以正常访问暴露的成员
const testRef = childRefs.value[0];
testRef?.logName(); // 类型正确
</script>

这种方法虽然需要写defineExpose，但能明确组件的对外接口，类型更可控，适合需要在父组件（或递归子组件）中调用实例方法的场景。

方法3：手动定义实例接口（适合简单组件） #

如果组件逻辑简单，不需要完整的实例类型，只需要访问特定属性，可以手动定义一个接口，结合ComponentPublicInstance使用：

// toto.vue
<template>
  {{ data.name }}
  <toto 
   v-for="item in data.children"
   ref="childRefs"
   :key="item.id"
   :data="item"
  />
</template>

<script setup lang="ts">
import { useTemplateRefsList } from '@vueuse/core';
import type { ComponentPublicInstance } from 'vue';

const props = defineProps<{
  id: string;
  name: string;
  children?: Array<{
    id: string;
    name: string;
    children?: Array<typeof props>;
  }>
}>();

// 手动定义需要访问的实例属性接口
interface TotoInstance extends ComponentPublicInstance {
  id: string;
  name: string;
}

// 指定类型
const childRefs = useTemplateRefsList<TotoInstance>();
</script>

这种方法最简单，适合只需要访问少量属性的场景，避免了模块自引用的复杂操作。

针对你已尝试方案的补充说明 #

1. ComponentPublicInstance：确实过于泛化，无法获取组件的具体属性/方法，适合临时调试但不适合生产代码。
2. InstanceType：因为组件在自身定义阶段尚未完成初始化，所以会出现循环引用错误，而方法1的模块自引用是TypeScript支持的合法自引用，不会触发该错误。
3. 外部ts文件导出类型：你遇到的循环引用错误是因为直接导出了InstanceType，而方法1的自引用是在类型层面的延迟解析，不会触发该问题。

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