为何Axios返回AxiosResponse<any, any>？TypeScript类型错误排查

问题原因 #

你遇到的问题核心是包装函数wrapReadMethod没有正确传递泛型类型。虽然你给getItems声明了返回Promise<Item[]>，但未加泛型的包装函数无法让TypeScript推断出res.data的具体类型，导致then回调里的data依然被识别为AxiosResponse<any, any>，和prepareItem要求的Item[]参数类型不匹配。

解决方案 #

给包装函数添加泛型支持，让它能传递Axios响应的类型信息：

1. 修改wrapReadMethod，添加泛型约束：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

const wrapReadMethod = <T>(
  fn: (url: string, config?: AxiosRequestConfig) => Promise<AxiosResponse<T>>
) => (url: string, params = {}, source = axios.CancelToken.source()) =>
  CancelPromise.setCancel(source.cancel)
    .then(() => fn(url, { params, cancelToken: source.token }))
    .then(res => res.data);

这里的<T>用来指代响应数据的类型，同时约束传入的fn（即Axios的get方法）必须返回包含该类型的AxiosResponse，这样TypeScript就能明确res.data的类型是T。

2. 调用apiAxios.get时指定泛型类型：

const stuff = {
  getItems: (): Promise<Item[]> => apiAxios.get<Item[]>(`/api/get-items`).then((data) => {
      return prepareItem(data);
  }),
};

通过<Item[]>指定泛型，让Axios知道接口返回的响应数据是Item[]类型，经过包装函数处理后，then回调里的data会被正确推断为Item[]，和prepareItem的参数类型完全匹配。

额外说明 #

原来的包装函数因为缺少泛型，TypeScript只能把fn的返回类型推断为Promise<AxiosResponse<any, any>>，即使你声明了getItems的返回类型，也无法覆盖回调内部的类型推断——这就是为什么你明明写了返回类型，依然出现类型错误的原因。

内容的提问来源于stack exchange，提问作者nerdess