如何典型化 axios 请求标头

Question

我正在尝试通过 Axios 发送请求，并且我想指定请求标头。 但我得到一个错误。

我创建了一个接口 Headers 并用它来声明变量this._apiHeaders 。

错误文字：

The "Headers" type cannot be assigned to the "AxiosRequestHeaders" type.
There is no index signature for the "string" type in the "Headers" type (ts2322)

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

const response: ITest = await axios.get(
  this.formCorrectApiUrl(Endpoints.classes, DBObjectName),
  {
    headers: this._apiHeaders    // Here I get error
  }
);

有人可以告诉我如何修复错误以及它发生的原因。

Answer 1

这可以通过“扩展”来实现

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

但我建议另外使创建字段的能力成为可选的。

export type NonUndefined<T, E = undefined> = Pick<
  T,
  {
    [Prop in keyof T]: T[Prop] extends E ? never : Prop
  }[keyof T]
>

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

type AxiosHeaders = NonUndefined<Headers>

const headers: AxiosHeaders = {
  'X-Parse-Application-Id': 'test',
}

Answer 2

请试试这个

import axios, { AxiosRequestHeaders } from 'axios';

await axios.get(url, { headers: (this._apiHeaders as any as AxiosRequestHeaders) })