Typescript error while calling axios - no overload matches this call

Question

I'm calling axios and passing in a config object like the following:

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

axios(req)

I'm getting a typescript error that says "No overload matches this call". The axios function takes on a config object of the type AxiosRequestConfig :

axios(config: AxiosRequestConfig): AxiosPromise<any>

For your reference, here is what the AxiosRequestConfig type looks like, along with the Method type:

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'

I don't understand this error, because it seems like my config object satisfies this interface just fine. And here's where it gets extra confusing to me: if I change the type definition of AxiosRequestConfig so that

method?: String;

instead of

method?: Method

Then the typescript error disappears. Also, if I try to spread in my config object and manually add a method property like the following:

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

The error disappears again. But I have to add the method property in... if I just spread in my config object I get the same error as before.

So it seems like the error may be linked to the method property of the AxiosRequestConfig interface, but ultimately I'm not sure. Thank you for any help.

Answer 1

This is a very straightforward Answer.

add

AxiosRequestConfig

in your import statement like this

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

and then go down below where your config code is and just assign AxiosRequestConfig interface to your config variable like this

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

doing this work for me and I hope it will work for you, too.