如何在函数中输入异步获取？

Question

给定以下代码，我收到数据常量的不安全分配错误。

import { useQuery, QueryResult } from "react-query";
import { url } from './api';

import { User, UserFetch } from '../types/User';

const getUser = async (): Promise<User> => {
  //
  // Unsafe assignment of an any value.eslint@typescript-eslint/no-unsafe-assignment
  //
  const data = await fetch(url).then((res) => res.json());
  return data;
}

export default function useUser(): QueryResult<User> {
  return useQuery<User>("userData", getUser);
}

如何安全地输入等待的数据分配结果？

Answer 1

有时您会到达类型安全的尽头。这是那些时代之一。

没有 'safe' 方法来获取 res.json() returns 并将其分配给特定类型。这本质上是一种信仰的飞跃，从服务器返回的结果确实具有 User 接口的形状。

在这种情况下禁用规则似乎是合适的。您还可以更具体地说明您通过使用显式类型断言断言服务器 returns 是 User 的事实（但不确定这是否会使 lint 规则静音）：

const getUser = async (): Promise<User> => {
  const data = (await fetch(url).then((res) => res.json())) as User;
  return data;
}

如何在函数中输入异步获取？

How to type an async fetch in a function?

reactjs

typescript

react-query