axios中AxiosRequestConfig类型和InternalAxiosRequestConfig类型的区别

之前用ts写了个request类方便发请求，最近想把以前写过的ts工具函数放在一起，新起了个项目。结果出现了如下的报错：

类型“(config: RequestConfig) => RequestConfig”的参数不能赋给类型“(value: InternalAxiosRequestConfig<any>) => InternalAxiosRequestConfig<any> | Promise<InternalAxiosRequestConfig<any>>”的参数。

这个RequestConfig是我自己定义的，本质上给AxiosRequestConfig添加一个拦截器的属性，如下

interface MyInterceptors {
    // 定义请求拦截和请求错误处理函数
    requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig
    requestInterceptorsCatch?: (err: any) => any
 
    responseInterceptors?: <T = AxiosResponse>(res: T) => T
    responseInterceptorsCatch?: (err: any) => any
}
// 这些拦截器实际上是放在config里面的，因此这个接口要和AxiosRequestConfig整合
export interface RequestConfig extends AxiosRequestConfig {
    interceptors?: MyInterceptors
}

这个错误其实是出现在request拦截器（就是那个interceptor）上的，大概意思就是拦截器里，传入和返回的参数不再是那个RequestConfig或者说是AxiosRequestConfig，而是这个新类型InternalAxiosRequestConfig

我琢磨应该是aixos版本不一样了，果然之前的版本用的是0.4几的版本，现在换成了1.4.0。

那到底AxiosRequestConfig和InternalAxiosRequestConfig这个类型有啥不同呢，我翻了一下node_modules里面axios的相关type，两者的定义如下：

AxiosRequestConfig:（因为只考察header部分，所以我把该类型的其他部分全部去掉了）

export interface AxiosRequestConfig<D = any> {
  headers?: (RawAxiosRequestHeaders & MethodsHeaders) | AxiosHeaders;
 }

InternalAxiosRequestConfig：

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

这里涉及到一个新的类型AxiosRequestHeaders，定义如下

export type AxiosRequestHeaders = RawAxiosRequestHeaders & AxiosHeaders;

看样子应该是对headers属性进行了修改，那问题来了关键这个修改是什么意思呢，肯定是和ts的类型相关。

首先ts是可以通过extends的方式，修改原有对象接口的字段属性的，但是这个新的字段的类型要和原先相兼容，我写了一个例子如下

interface A {
    age?:string|number
}
 
interface C extends A{
    age:number
}
let example:C={age:19}

例子中A类型之中的age字段直接被覆盖掉了，原先的string|number变成了number，当然可能有人问：C当中的age变成boolean，可不可以覆盖呢，也就是如下例子

interface A {
    age?:string|number
}
 
interface C extends A{
    age:boolean
}
let example:C={age:true}

答案是不可以，在这种情况下C类型会给出如下错误

Interface 'C' incorrectly extends interface 'A'.
  Types of property 'age' are incompatible.
    Type 'boolean' is not assignable to type 'string | number | undefined'.(2430)

也就是C中新规制的age字段和原先的类型不兼容。

这样的话，上面那个InternalAxiosRequestConfig类型也就好理解了，就是把原先的header字段重新规制了一下

{headers?: (RawAxiosRequestHeaders & MethodsHeaders) | AxiosHeaders}
 
变成如下
 
{headers: AxiosRequestHeaders;}
我们说type AxiosRequestHeaders = RawAxiosRequestHeaders & AxiosHeaders;
 
进一步转变又变成
 
{headers:RawAxiosRequestHeaders & AxiosHeaders}
 
 

那结合整篇文章就可以知道InternalAxiosRequestConfig和AxiosRequestConfig类型的不同，就是把headers字段中的MethodsHeaders类型排除了出来，至于这个类型为什么要排除出来呢，嘿嘿，我不知道，它是一个方法和header的键值对（类型可以参见下方），估计是给不同的方法单独配置headers用的，但是在我们的interceptors中，应该没什么用了，所以才剔除掉。感兴趣的可以去github上面看看有没有相关信息

type MethodsHeaders = Partial<{
  [Key in Method as Lowercase<Key>]: AxiosHeaders;
} & {common: AxiosHeaders}>;

最后自己写了个类似的例子

interface X{
    x:boolean
}
interface Y{  
    y:string
}
interface Z{
    z:number
}
 
interface AxiosRequestConfig{
    headers:(X&Y)|Z
}
interface InternalAxiosRequestConfig extends AxiosRequestConfig{
    headers:X&Z
}
 
let ex:InternalAxiosRequestConfig={
    headers:{
        x:true,
        z:19,
        //y:"hh" 这边就会报错啦
    }
}