解决：用TS封装Axios报错TS2345：Argument of type ‘((config: AxiosRequestConfig＜any＞) =＞ AxiosRequestConfig...

 代码没问题，但是一直报红线。

 

class SYRequest {
  instance: AxiosInstance
  interceptors?: SYRequestInterceptors

  constructor(config: SYRequestConfig) {
    this.instance = axios.create(config)
    this.interceptors = config.interceptors

    // 从 config 中取出的拦截器是对应的实例的拦截器
    this.instance.interceptors.request.use(
      this.interceptors?.requestInterceptor,
      this.interceptors?.requestInterceptorCatch
    )

 运行后报错，研究发现是axios的版本问题

ERROR in src/service/request/request.ts:26:7
TS2345: Argument of type '((config: AxiosRequestConfig<any>) => AxiosRequestConfig<any>) | undefined' is not assignable to parameter of type '((value: InternalAxiosRequestConfig<any>) => InternalAxiosRequestConfig<any> | Promise<InternalAxiosRequestConfig<any>>) | null | undefined'.
  Type '(config: AxiosRequestConfig<any>) => AxiosRequestConfig<any>' is not assignable to 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; "User-Agent": AxiosHeaderValue; "Content-Encoding": AxiosHeaderValue; Authorization: AxiosHeaderValue; } & { ...; }>'.
    24 |     // 从 config 中取出的拦截器是对应的实例的拦截器
    25 |     this.instance.interceptors.request.use(
  > 26 |       this.interceptors?.requestInterceptor,
       |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    27 |       this.interceptors?.requestInterceptorCatch
    28 |     )
    29 |     this.instance.interceptors.response.use(

解决方法：

yarn add axios@next
加上next装的是：axios@1.2.0-alpha.1版本。
看来应该是新版本的bug

上官网查看版本信息：

1.2.3版本提到了这个问题。装上之后，果然可以用，但经过测试1.2.4后的版本都不行。