reactjs - 如何在函数中键入异步提取？

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

有时你会走到类型安全的尽头。这是其中之一。

没有“安全”的方式来获取res.json()返回的内容并将其分配给特定类型。这本质上是一种信念的飞跃，服务器返回的结果确实具有User接口的形状。

在这种情况下禁用规则似乎是合适的。您还可以更具体地说明您User通过使用显式类型断言断言服务器返回 a 的事实（虽然不确定这是否会使 lint 规则保持沉默）：

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