Vue3 script setup中使用ref<InstanceType<typeof XXX>>()报错如何解决？

• 核心原因是Vue3的script setup语法默认是闭包作用域，组件内部的属性、方法默认不会对外暴露，TypeScript无法通过typeof XXX拿到完整的组件实例结构，导致InstanceType推导异常，甚至会返回never类型
• 组件导入路径未携带.vue后缀，TypeScript无法识别.vue文件的默认类型导出，导致推导的组件类型错误
• 项目TypeScript配置不规范，未安装vue-tsc依赖，或者tsconfig.json中未正确配置模块解析规则、Vue类型声明引入，导致InstanceType工具无法正确解析Vue组件的实例结构
• 目标组件为JS/JSX编写，未提供显式的TypeScript类型声明，无法完成自动类型推导

• 方案1：在目标子组件的script setup中使用defineExpose显式暴露需要外部访问的属性和方法，TypeScript会自动将暴露的内容合并到组件实例类型中，示例如下：

<!-- 子组件XXX.vue -->
<script setup lang="ts">
const getData = () => Promise.resolve()
const count = ref(0)
// 显式暴露属性方法
defineExpose({
  getData,
  count
})
</script>

父组件中直接使用ref<InstanceType<typeof XXX>>()即可正常推导类型

• 方案2：显式自定义组件实例类型，适合需要精准控制实例类型的场景：

<!-- 子组件XXX.vue -->
<script setup lang="ts">
export type XXXInstance = {
  getData: () => Promise<void>
  count: number
}
const getData = () => Promise.resolve()
const count = ref(0)
defineExpose({ getData, count })
</script>

父组件中导入类型使用：

import XXX from './XXX.vue'
import type { XXXInstance } from './XXX.vue'
const xxxRef = ref<XXXInstance | null>(null)

• 方案3：检查组件导入语法，确保导入路径携带.vue后缀，示例：import XXX from './XXX.vue'，不要省略后缀
• 方案4：校验项目TS配置，确保已安装vue-tsc依赖，tsconfig.json中配置了"moduleResolution": "bundler"（适配Vite/Rollup等构建工具），且正确引入了Vue的类型声明
• 方案5：临时绕过类型校验（不推荐，会丢失类型提示）：const xxxRef = ref<InstanceType<any> | null>(null)

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