TypeScript结合redux-thunk+axios封装ApiClient时callback报错如何解决

错误根因 #

TypeScript 无法自动推断出axios.get返回的response.data的类型，默认推导为never类型，同时你使用宽泛的Function类型标注callback，和.then()方法要求的入参函数类型不匹配，因此抛出错误。 #

修复方案 #

方案1（推荐，无副作用） #

给axios请求添加返回值泛型，同时明确callback的参数类型，修改后的代码如下：

// ApiClient文件修改
const apiClient = {
  // 把callback的Function类型替换为明确的入参类型声明
  getComments: function (callback: (comments: types.Comment[]) => void) {
    // 给axios.get加泛型，明确返回的data是Comment数组类型
    return axios
      .get<types.Comment[]>(routes.GET_COMMENTS_URL)
      .then((response) => response.data)
      .then(callback) // 此处错误会消失
      .catch((err) => console.log(err));
  },
};

如果你的callback是可选参数，可以把类型标注改为callback?: (comments: types.Comment[]) => void，调用前加非空判断即可。

方案2（临时应急，适合快速跑通流程） #

如果暂时不想调整类型定义，可以用类型断言跳过类型检查：

const apiClient = {
  getComments: function (callback: Function) {
    return axios
      .get(routes.GET_COMMENTS_URL)
      .then((response) => response.data)
      // 把callback断言为接收任意参数返回void的函数
      .then(callback as (data: unknown) => void)
      .catch((err) => console.log(err));
  },
};

注意该方案会丢失类型检查，仅建议临时使用。

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