調用 axios 時出現 Typescript 錯誤 - 沒有與此調用匹配的過載

Question

我正在調用 axios 並傳入配置 object ，如下所示：

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

axios(req)

我收到 typescript 錯誤，提示“沒有與此調用匹配的過載”。 axios function 采用 AxiosRequestConfig 類型的配置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'

我不明白這個錯誤，因為我的配置 object 似乎很好地滿足了這個接口。 這就是讓我更加困惑的地方：如果我更改AxiosRequestConfig的類型定義，以便

method?: String;

代替

method?: Method

然后 typescript 錯誤消失。 此外，如果我嘗試在我的配置 object 中傳播並手動添加如下方法屬性：

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

錯誤再次消失。 但是我必須添加方法屬性...如果我只是在我的配置 object 中傳播，我會得到與以前相同的錯誤。

所以看起來錯誤可能與 AxiosRequestConfig 接口的方法屬性有關，但最終我不確定。 感謝您的任何幫助。

Answer 1

這是一個非常直接的答案。

添加

AxiosRequestConfig

在像這樣的導入語句中

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

然后 go 在您的配置代碼所在的位置下方，然后將AxiosRequestConfig接口分配給您的配置變量，如下所示

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);

為我做這項工作，我希望它也對你有用。