如何在Nuxt中指定useFetch数据返回类型

Question

我正在从 Nuxt3 中的 API 获取数据。我正在使用打字稿，我希望定义我将获得的数据类型。我如何指定这一点？

<script lang="ts" setup>
  interface APIBody {
    /* properties defined here */
  }

  const {data} = await useFetch("api_url here")
</script>

<template>
 {{ data.name.officialName }}
<template>

template我在显示的位置出现错误data.name.officialName

属性“name”在类型“never”上不存在

但是，在浏览器中运行代码时，该网站运行良好。

编辑 我尝试了以下代码，但现在收到不同的错误。

<script lang="ts" setup>
  interface APIBody {
    /* properties defined here */
  }

  const typedData = ref<APIBody[]>()
  const {data} = await useFetch("api_url here")
  typedData.value = data as APIBody[] // -> error here
</script>

<template>
 {{ data.name.officialName }}
<template>

本例中的错误是：

将类型“Ref<Pick<unknown, never>>”转换为类型“APIBody[]”可能是一个错误，因为两种类型都没有与另一种类型充分重叠。

Answer 1

您可以给定一个类型useFetch来定义返回类型

喜欢：

  interface APIBody {
    /* properties defined here */
  }

  const {data} = await useFetch<APIBody>("api_url here")