将 react-query 与 TypeScript 一起使用答案

【问题标题】：Use react-query with TypeScript将 react-query 与 TypeScript 一起使用
【发布时间】：2021-12-27 22:03:20
【问题描述】：

我正在尝试将 react-query 与 TypeScript 一起使用，并通过 ts 接口提供请求的结果。现在我有以下问题

“数据”的值是这个

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

【问题讨论】：

【解决方案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 中的函数上时，您可能会检查这一点。

【讨论】：