带有 Axios 的 Typescript 通用 useAsync 推断 'unknown' 而不是正确的响应类型

Question

我使用 axios 创建了一个通用的 useAsync 钩子。目前，出于某种原因我无法解决，响应被推断为 unknown 而不是 AxiosResponse<MyOwnType>

我有一个工作 playground 可以说明问题。 data 键入为 unknown，这是不正确的。

Answer 1

使用 TypeScript 无法真正实现您在此处尝试执行的操作：

// Can't define a second generic by a `unknown` generic type
const useAsync = <D, F extends PromiseFn<D>>(promiseFn: F) => {

1- 因此，您应该做的是从函数签名中删除 D 泛型。

2- 第二部分，将 asyncReducer 函数移动到您自己的钩子中，并利用已经定义的 F 泛型。

const useAsync = <F extends PromiseFn<any>>(promiseFn: F) => {

  const asyncReducer = (
    state: AsyncState<AxiosResponseType<F>>,
    action: AsyncAction<AxiosResponseType<F>>
  ): AsyncState<AxiosResponseType<F>> => {
...

3- 您现在可以删除第 68 行的类型断言，并通过定义以下类型传入泛型的 return 类型：

type AxiosResponseType<F extends PromiseFn<any>> = Awaited<ReturnType<F>>;

4- 使用这个新泛型来键入 state、action 和 return 类型的减速器，你应该可以开始了！

Link with working sample

带有 Axios 的 Typescript 通用 useAsync 推断 'unknown' 而不是正确的响应类型

Typescript generic useAsync with Axios infers 'unknown' instead of correct response type

typescript

typescript-generics

axios

react-hooks