带有 redux-thunk 和 axios 的 TypeScript

Question

我正在尝试将我的应用程序转换为 TypeScript，我已经到了最后一部分，我需要重构仅处理 API 请求的 ApiClient 文件。

这是一个简化版本：

import axios from "axios";
import * as types from "../types/types"
import * as routes from "../constants/ApiRoutes"

// axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
// axios.defaults.headers.common["Accept"] = "application/json";

const apiClient = {
  getComments: function (callback: Function) {
    return axios
      .get(routes.GET_COMMENTS_URL)
      .then((response) => response.data)
      .then(callback) // this throws an error
      .catch((err) => console.log(err));
  },

};

export default apiClient;


// this is the code in action creators

export function fetchCommentsAction(callback: Function) {
  return function (dispatch: Function) {
    apiClient.getComments((comments: types.Comment[]) => {
      dispatch(commentsReceivedSuccess(comments));
    });
    if (callback) {
      callback();
    }
  };
}

回调函数在从服务器收到响应时运行，但问题是如果我将回调类型设为 Function，我会收到一条错误消息 Argument of type 'Function' is not assignable to parameter of type '(value: never) => PromiseLike<never>'.

有什么快速解决方法？

谢谢！

Answer 1

我认为您不应该使用“函数”，它太抽象了。您可以使用“() => void”键入一个函数，其中 void 是 return 类型。

所以在你的情况下我会尝试这样的事情：

getComments: function (callback: (value: any) => Promise<any>) {

而且编译器告诉你尝试(value: never) => PromiseLike<never>，我会先尝试。

这是关于输入回调的文档的 link：https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#return-types-of-callbacks

理想情况下，您应该输入您的请求正在 return 的响应对象，并且您应该避免使用 never 或 any..

带有 redux-thunk 和 axios 的 TypeScript

TypeScript with redux-thunk and axios

typescript

reactjs

redux

axios