Axios 1.3.4 typescript error for AxiosRequestConfig #5573

@vishalrajole

Description

Describe the bug

Upgraded to axios 1.3.4 and typescript 4.9.5 and getting TS warning for request headers type

Argument of type '(config: InternalAxiosRequestConfig<any>) => AxiosRequestConfig<any>' is not assignable to parameter of type '(value: InternalAxiosRequestConfig<any>) => InternalAxiosRequestConfig<any> | Promise<InternalAxiosRequestConfig<any>>'.
  Type 'AxiosRequestConfig<any>' is not assignable to type 'InternalAxiosRequestConfig<any> | Promise<InternalAxiosRequestConfig<any>>'.
    Type 'AxiosRequestConfig<any>' is not assignable to type 'InternalAxiosRequestConfig<any>'.
      Types of property 'headers' are incompatible.
        Type 'AxiosHeaders | (Partial<RawAxiosHeaders & { Accept: AxiosHeaderValue; "Content-Length": AxiosHeaderValue; "User-Agent": AxiosHeaderValue; "Content-Encoding": AxiosHeaderValue; Authorization: AxiosHeaderValue; } & { ...; }> & Partial<...>) | undefined' is not assignable to type 'AxiosRequestHeaders'.
          Type 'undefined' is not assignable to type 'AxiosRequestHeaders'.
            Type 'undefined' is not assignable to type 'Partial<RawAxiosHeaders & { Accept: AxiosHeaderValue; "Content-Length": AxiosHeaderValue;

To Reproduce

  • create react sandbox with axios latest version 1.3.4
  • create basic interceptor (mentioned below)
  • sample https://codesandbox.io/s/vigilant-elbakyan-wdjzgd?file=/src/interceptor.ts
  • Code snippet

    import
    
    
    
    
        
     axios, { AxiosRequestConfig, InternalAxiosRequestConfig } from "axios";
    export const axiosInstance = axios.create({
      baseURL: SOME_URL
    });
    // Interceptors
    axiosInstance.interceptors.request.use(
      (config): AxiosRequestConfig => {
        return config;
      (error): any => {
        return Promise.reject(error);
    axiosInstance.interceptors.response.use(
      async (response): Promise<any> => {
        return response;
      async (error): Promise<any> => {
        return Promise.reject(error);
    

    Expected behavior

    AxiosRequestConfig is using following type definition for headers

    headers?: (RawAxiosRequestHeaders & MethodsHeaders) | AxiosHeaders;
    

    instead If we use InternalAxiosRequestConfig, mentioned TS error goes away. but since it is called internal, it is confusing for devs to use it or not.

    export interface InternalAxiosRequestConfig<D = any> extends AxiosRequestConfig<D> {
      headers: AxiosRequestHeaders;
    

    Axios Version

    1.3.4

    Adapter Version

    No response

    Browser

    No response

    Browser Version

    No response

    Node.js Version

    No response

    No response

    Additional Library Versions

    No response

    Additional context/Screenshots

    No response