如何让VueUse的useFetch调用json()后正确推断返回类型？

问题出在泛型的指定位置上：VueUse的useFetch初始泛型默认对应原始响应对象（如Response），当你调用.json()方法解析响应体时，需要在.json()方法本身上指定解析后的类型，而不是在useFetch的初始泛型中。

正确写法如下：

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

interface Person {
  id: number
  first_name: string
  last_name: string
}

const url = 'http://localhost:8000/api/persons/1/'

// 将泛型Person指定在json()方法上
const { isFetching, data: person } = useFetch(url).get().json<Person>()

console.log(person)
</script>

<template>
  <div>
    <div v-if="isFetching">
      <LoadingIndicator />
    </div>
    <div v-else>
      <div v-if="person">
          {{ person.id }}: {{ person.first_name }} {{ person.last_name }}
      </div>
    </div>
  </div>
</template>

补充方案：通过配置项指定类型 #

如果需要更自定义的处理逻辑，也可以通过afterFetch钩子手动指定类型：

const { isFetching, data: person } = useFetch(url, {
  async afterFetch({ response }) {
    // 手动解析并断言类型
    return { data: await response.json() as Person }
  }
}).get()

这不是IDE问题，是对VueUse useFetch的泛型设计逻辑理解偏差导致的——.json()方法会返回一个新的状态实例，其类型由自身的泛型参数决定，而非初始的useFetch泛型。

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