Axios 1.4.0拦截器：为请求加元数据遇TypeScript类型错误如何解决？

你遇到的不是代码逻辑错误，是TypeScript的类型检查机制导致的——InternalAxiosRequestConfig接口默认并没有定义metadata字段，直接给它赋值就会触发类型不匹配的报错。

下面是两种可行的解决方法：

方法一：扩展Axios的类型定义（推荐） #

创建一个类型声明文件（比如axios.d.ts），在里面扩展Axios的内置接口：

import 'axios';

declare module 'axios' {
  interface InternalAxiosRequestConfig {
    metadata?: {
      startTime?: Date;
      // 后续需要添加其他元数据字段也可以在这里补充
    };
  }
}

确保这个文件被TypeScript识别，比如在tsconfig.json的include数组中包含该文件路径，之后再使用config.metadata就不会有类型错误了。

方法二：使用类型断言（快速临时解决） #

如果只是临时场景，可以用类型断言绕过TypeScript的类型检查：

instance.interceptors.request.use(
  function (config) {
    (config as any).metadata = { startTime: new Date() };
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

或者更严谨一点，自定义扩展接口后再断言：

import { InternalAxiosRequestConfig } from 'axios';

interface AxiosRequestConfigWithMetadata extends InternalAxiosRequestConfig {
  metadata?: {
    startTime?: Date;
  };
}

instance.interceptors.request.use(
  function (config: AxiosRequestConfigWithMetadata) {
    config.metadata = { startTime: new Date() };
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

内容的提问来源于stack exchange，提问作者Tim