调用 axios 时出现打字稿错误 - 没有重载匹配此调用答案

【问题标题】：Typescript error while calling axios - no overload matches this call调用 axios 时出现打字稿错误 - 没有重载匹配此调用
【发布时间】：2020-12-10 05:42:28
【问题描述】：

我正在调用 axios 并传入如下配置对象：

const req = { method, url, timeout: 300000, headers: { 'Content-Type': 'application/json' } }

axios(req)

我收到一个打字稿错误，上面写着“没有重载匹配此调用”。 axios 函数采用AxiosRequestConfig 类型的配置对象：

axios(config: AxiosRequestConfig): AxiosPromise<any>

供您参考，下面是 AxiosRequestConfig 类型和 Method 类型的样子：

interface AxiosRequestConfig {
  url?: string;
  method?: Method;
  baseURL?: string;
  transformRequest?: AxiosTransformer | AxiosTransformer[];
  transformResponse?: AxiosTransformer | AxiosTransformer[];
  headers?: any;
  params?: any;
  paramsSerializer?: (params: any) => string;
  data?: any;
  timeout?: number;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  adapter?: AxiosAdapter;
  auth?: AxiosBasicCredentials;
  responseType?: ResponseType;
  xsrfCookieName?: string;
  xsrfHeaderName?: string;
  onUploadProgress?: (progressEvent: any) => void;
  onDownloadProgress?: (progressEvent: any) => void;
  maxContentLength?: number;
  validateStatus?: (status: number) => boolean;
  maxRedirects?: number;
  socketPath?: string | null;
  httpAgent?: any;
  httpsAgent?: any;
  proxy?: AxiosProxyConfig | false;
  cancelToken?: CancelToken;
}

type Method =
  | 'get' | 'GET'
  | 'delete' | 'DELETE'
  | 'head' | 'HEAD'
  | 'options' | 'OPTIONS'
  | 'post' | 'POST'
  | 'put' | 'PUT'
  | 'patch' | 'PATCH'
  | 'link' | 'LINK'
  | 'unlink' | 'UNLINK'

我不明白这个错误，因为我的配置对象似乎很好地满足了这个接口。这就是让我更加困惑的地方：如果我更改 AxiosRequestConfig 的类型定义，那么

method?: String;

而不是

method?: Method

然后打字稿错误消失了。另外，如果我尝试在我的配置对象中传播并手动添加一个方法属性，如下所示：

axios({...req, method: 'GET'})

错误再次消失。但是我必须添加方法属性...如果我只是在我的配置对象中传播，我会得到与以前相同的错误。

所以看起来错误可能与 AxiosRequestConfig 接口的方法属性有关，但最终我不确定。感谢您的帮助。

【问题讨论】：

如果指定req的类型，即const req: AxiosRequestConfig = { ... }，说明什么？
如果将 req 对象转换为 Axios config 会怎样？
好吧，axios 调用上的错误确实消失了，但它告诉我：找不到名称'AxiosRequestConfig'
我尝试导入接口，现在报错：is not assignable to type 'AxiosRequestConfig'
它还说：属性“方法”的类型不兼容。类型 'string' 不可分配给类型 '"POST" | “放” | “得到” | “删除” | “得到” | “删除” | “头” | “头” | “选项” | “选项” | “帖子” | “放” | “补丁” | “补丁” | “链接” | “链接” | “取消链接” | “取消链接” |未定义'。

标签： javascript typescript axios

【解决方案1】：

这是一个非常直接的答案。

添加

AxiosRequestConfig

在您的导入语句中像这样

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

然后向下到您的配置代码所在的位置，然后像这样将 AxiosRequestConfig 接口分配给您的 config 变量

const config: AxiosRequestConfig = {
      method: 'get',
      url: `${quickbooksBaseURL}/v3/company/${QuickbooksCustomerID}/invoice/${invoiceID}/pdf?minorversion=${minorVersion}`,
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${accessToken}`
      }
    };
    const response: AxiosResponse = await axios(config);

为我做这项工作，我希望它也对你有用。

【讨论】：