TypeScript中Axios通用请求头创建报错问题求助

问题原因 #

你的Header接口继承了AxiosHeaders，但AxiosHeaders包含set、get、has等20多个方法，而你创建的普通对象字面量{"Content-Type": "...", "Accept": "..."}并不具备这些方法，因此类型检查失败。

解决方案 #

方案1：修改Header接口为普通对象类型 #

Axios的headers参数本身支持普通键值对对象，无需继承AxiosHeaders。调整接口定义：

export interface Header {
  "Content-Type": string;
  Accept: string;
  Authorization?: string;
}

此时authHeader函数返回的普通对象就能完美匹配类型，无需修改函数逻辑。

方案2：创建AxiosHeaders实例 #

如果必须使用AxiosHeaders类型，需要通过AxiosHeaders.from()方法创建实例，而不是直接用对象字面量：

import { AxiosHeaders } from 'axios';

export interface Header extends AxiosHeaders {
  "Content-Type": string;
  Accept: string;
  Authorization?: string;
}

export function authHeader(): Header {
  const token = localStorage.getItem("token");
  // 用AxiosHeaders.from创建具备方法的实例
  const header = AxiosHeaders.from({
    "Content-Type": "application/json",
    Accept: "application/json",
  }) as Header;
  
  if (token) {
    header.Authorization = `Bearer ${token}`;
  }
  return header;
}

方案3：使用Record类型简化定义 #

直接返回Record<string, string>类型，兼顾灵活性和类型安全：

export function authHeader(): Record<string, string> {
  const headers: Record<string, string> = {
    "Content-Type": "application/json",
    Accept: "application/json",
  };
  const token = localStorage.getItem("token");
  
  if (token) {
    headers["Authorization"] = `Bearer ${token}`;
  }
  return headers;
}

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