如何在NUXT中指定usefetch数据返回类型

Question

我正在NUXT3中的API获取数据。我正在使用TypeScript，并希望定义我将获得的数据类型。我该如何指定？

<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

属性'名称'不存在于类型'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＆lt; pick＆lt;未知的转换，从不键入'apibody []'可能是一个错误

Answer 1

您可以将类型提供给usefetch来定义返回类型，

例如：

  interface APIBody {
    /* properties defined here */
  }

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

Answer 2

这是我在NUXT 3.9.0中的工作示例：

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

在任何组件或页面中：

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

Answer 3

如果我们还需要基于pick中的

type SomeProps = {
    prop1: string;
    prop2: string;
};

export function usePropsApi() {
    const { public: { api } } = useRuntimeConfig();

    return {
        read: <T extends keyof SomeProps>({
            pick = [],
        }: {
            pick?: Array<T>;
        } = {}) => useFetch<Pick<SomeProps, T>>('/props', {
            baseURL: api,
            ...(pick.length && pick),
        }),
    };
}

类型不包括类型：

const { data } = await usePropsApi().read({
    pick: ['prop1'],
});
console.log('data.value: ', data.value?.prop1);
console.log('data.value: ', data.value?.prop2); // Property 'prop2' does not exist on type ...