如何为API调用返回值的ref分配泛型类型？

一、组件版本的正确实现（泛型Props） #

原代码的核心问题是ApiHandlerProps将call的返回值固定为Promise<unknown>，丢失了具体类型信息。只需把组件定义为泛型组件，就能让Vue自动从传入的API方法推断返回值类型。

修改后的API处理组件： #

<template>
  <slot :result="result" />
</template>

<script setup lang="ts" generic="T">
import { defineProps, ref } from 'vue'

// 通过泛型T关联API调用的返回值类型
const props = defineProps<{
  call: () => Promise<T>
}>()

// result类型与泛型T绑定，自动匹配API返回值
const result = ref<T | undefined>(undefined)

const handleApiCall = async () => {
  try {
    const response = await props.call()
    result.value = response
  } catch (error) {
    // 自定义错误处理逻辑
    console.error('API调用失败:', error)
  }
}

// 初始化执行API调用
handleApiCall()
</script>

使用方式（类型自动推断）： #

<template>
  <api-handler :call="fetchStuff" v-slot="{ result }">
    <!-- 此处result会自动推断为boolean | undefined -->
    <div v-if="result !== undefined">
      调用结果：{{ result }}
    </div>
  </api-handler>
</template>

<script setup lang="ts">
const fetchStuff = async (): Promise<boolean> => {
  // 模拟API请求逻辑
  return new Promise(resolve => setTimeout(() => resolve(true), 1000))
}
</script>

二、Composable方案的问题修正 #

你尝试的Composable思路可行，但需注意异步函数返回的是Promise包裹的Ref，使用时要正确处理异步状态：

修正后的Composable： #

// /api-handler-utils.ts
import { shallowRef, ShallowRef } from 'vue'

// 明确返回类型为Promise<ShallowRef<T | undefined>>
export const handleApiCall = async <T>(apiCall: () => Promise<T>): Promise<ShallowRef<T | undefined>> => {
  const result = shallowRef<T | undefined>(undefined)
  try {
    const response = await apiCall()
    result.value = response
  } catch (error) {
    console.error('API调用失败:', error)
  }
  return result
}

在组件中正确使用： #

<template>
  <div v-if="result">
    调用结果：{{ result.value }}
  </div>
</template>

<script setup lang="ts">
import { handleApiCall } from './api-handler-utils'

const fetchStuff = async (): Promise<boolean> => {
  return new Promise(resolve => setTimeout(() => resolve(true), 1000))
}

// 方式1：使用顶层await（需tsconfig中target设为ESNext及以上）
const result = await handleApiCall(fetchStuff)

// 方式2：不使用顶层await时的写法
// let result: ShallowRef<boolean | undefined> | null = null
// handleApiCall(fetchStuff).then(ref => result = ref)
</script>

常见导入错误的可能原因：

• 未处理Composable的异步返回值（直接将Promise赋值给变量，导致类型不匹配）
• 项目TS配置未启用top-level await（需在tsconfig.json的compilerOptions中设置"target": "ESNext"）
• 泛型参数未被正确自动推断（可显式传入handleApiCall<boolean>(fetchStuff)强制指定）

三、补充说明 #

从React转Vue时，类型系统的核心差异在于Vue组件需通过<script setup lang="ts" generic="T">显式声明泛型Props，而React组件通常通过泛型Props自动推断。理解这一点后，这类类型推断问题就能快速解决。

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