如何正确定义Axios请求头TypeScript类型解决ts2322报错

AxiosRequestHeaders是Axios内置的请求头类型，默认带有字符串索引签名，允许传入任意字符串作为请求头字段名，值支持string | string[] | number | boolean类型。
你自定义的Headers接口只明确声明了X-Parse-Application-Id、X-Parse-REST-API-Key两个固定字段，没有定义对应的索引签名，TypeScript做类型兼容性校验时，会判定这个类型无法满足Axios请求头对任意字符串key的访问要求，因此抛出ts2322类型错误。

可根据实际场景选择以下任意一种方案解决：

• 方案1：给自定义接口补充索引签名，直接匹配Axios的类型要求

interface Headers {
  'X-Parse-Application-Id': string,
  'X-Parse-REST-API-Key': string,
  // 补充索引签名，和Axios请求头类型兼容
  [key: string]: string | string[] | number | boolean
}

• 方案2：让自定义接口直接继承Axios内置的AxiosRequestHeaders类型，不需要手写索引签名，还能获得Axios内置通用请求头（比如Content-Type、Authorization等）的类型提示

import type { AxiosRequestHeaders } from 'axios';

interface Headers extends AxiosRequestHeaders {
  'X-Parse-Application-Id': string,
  'X-Parse-REST-API-Key': string
}

• 方案3：如果不想修改原有接口定义，可以在传参时使用类型断言，手动告知TypeScript该值符合Axios的类型要求

const response: ITest = await axios.get(
  this.formCorrectApiUrl(Endpoints.classes, DBObjectName),
  {
    headers: this._apiHeaders as AxiosRequestHeaders
  }
);

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