将 react-query 与 TypeScript 一起使用

Posted 2023-03-13

【中文标题】将 react-query 与 TypeScript 一起使用

【英文标题】：Use react-query with TypeScript

【发布时间】：2021-12-27 22:03:20

【问题描述】：

我正在尝试，并通过 ts 接口提供请求的结果。现在我有以下问题

“数据”的值是这个

但我无法访问它，因为我在界面中指定了结果

编辑：我忘了添加钩子和接口。

【问题讨论】：

能否请您展示一下您的函数useCustomUser 的样子？

什么是 ICustomUser？

我添加了额外的截图@KlimovPeter :)

【参考方案1】：

好的，我修好了。将此添加到 fetchUser 函数中，现在它将只返回数据而不是整个请求。 ?

【参考方案2】：

如果您正确键入 fetchUser 函数，我们可以使这个类型安全。

首先我们有 fetcher 函数。这里我们指定数据的返回类型。在这种情况下，ICustomUser 并从 http 库中解构它，例如 axios。

export async function fetchUser(id: string) 
  const  data  = await http.get<ICustomUser>(`devices/$id`);

  return data;

那么当你返回你的useCustomUser钩子时，返回的数据将是ICustomUser类型。

// data will be of type ICustomUser
const  data  = useCustomHook();

另外，可能不需要键入useCustomHook 函数。 Typescript 会为你隐式输入这个。当您将鼠标悬停在 VS Code 中的函数上时，您可能会检查这一点。