React+TypeScript中AxiosRequestHeaders类型不兼容问题求助

问题场景 #

在React+TypeScript项目中，编写authHeader函数从localStorage获取用户令牌并生成请求头对象，但在axios请求拦截器中赋值给config.headers时，触发类型错误：普通对象缺少AxiosHeaders类的set、get等方法。

错误信息 #

TS2322: Type '{ Authorization: string; }' is not assignable to type 'AxiosRequestHeaders'.
  Type '{ Authorization: string; }' is missing the following properties from type 'AxiosHeaders': set, get, has, delete, and 23 more.

原代码 #

AuthHeaders.ts #

export default function authHeader(): AxiosRequestHeaders {
  type userToken = {
  accessToken: string;
};
  const localstorageUser = localStorage.getItem("user");
  if (!localstorageUser) {
    return {};
  }
  const user = JSON.parse(localstorageUser);
  if (user && user.token) {
    return { Authorization: `Token ${user.token}` };
  }
  return {};
}

AuthContext.ts调用片段 #

export const AuthContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  // ...其他代码
  const authAxios = axios.create();
  authAxios.interceptors.request.use((config) => {
    config.headers = authHeader();
    return config;
  });
}

解决方案 #

方案一：返回AxiosHeaders实例 #

修改authHeader函数，使用Axios提供的AxiosHeaders.from()或构造函数生成符合类型要求的实例：

import { AxiosHeaders, AxiosRequestHeaders } from 'axios';

export default function authHeader(): AxiosRequestHeaders {
  type userToken = {
    accessToken: string;
  };
  const localstorageUser = localStorage.getItem("user");
  if (!localstorageUser) {
    return new AxiosHeaders();
  }
  const user = JSON.parse(localstorageUser);
  if (user && user.token) {
    return AxiosHeaders.from({ Authorization: `Token ${user.token}` });
  }
  return new AxiosHeaders();
}

方案二：合并请求头而非直接覆盖 #

不替换整个config.headers，而是用Object.assign将自定义头合并到原有实例中，保留AxiosHeaders的方法：

export const AuthContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  // ...其他代码
  const authAxios = axios.create();
  authAxios.interceptors.request.use((config) => {
    Object.assign(config.headers, authHeader());
    return config;
  });
}

原因说明 #

Axios新版本中，AxiosRequestHeaders类型本质是AxiosHeaders类的实例，而非普通对象字面量。直接返回普通对象会导致类型不匹配，触发TS错误。

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