javascript - Como especificar o tipo de retorno dos dados do useFetch no Nuxt

Estou buscando dados de uma API no Nuxt3. Estou usando TypeScript e desejo definir o tipo de dados que irei receber. Como faço para especificar isso?

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

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

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

Recebo um erro no template onde estou exibindo data.name.officialName

A propriedade 'name' não existe no tipo 'never'

No entanto, ao executar o código no navegador, o site funciona bem.

Editar Eu tentei o seguinte código, mas agora estou recebendo um erro diferente.

<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>

O erro neste caso é:

A conversão do tipo 'Ref>' para o tipo 'APIBody[]' pode ser um erro porque nenhum dos tipos se sobrepõe suficientemente ao outro.

Resposta #1

Você pode atribuir um tipo a useFetch para definir o tipo de retorno

Curtir :

  interface APIBody {
    /* properties defined here */
  }

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

Resposta #2

Este é o meu exemplo funcionando no Nuxt 3.9.0:

// /api/test.post.ts
export default defineEventHandler(async (event) => {
    const body = await readBody(event);
    return { body };
});

Em qualquer componente ou página:

<script lang="ts" setup>
import type { AsyncData } from 'nuxt/app';
import type { FetchError } from 'ofetch';
    
interface Body { key: string };
    
const { data: { value: { body } }, error } = await useFetch('/api/test', {
  method: 'post',
    body: {
      key: 'value',
    }
  }) as AsyncData<{ body: Body }, FetchError>;
    
// now you're getting body's properties without ts-errors
console.log(body.key); // value
</script>