angular - 理解复杂的 Type Script 类型声明

Question

问题是关于如何使用对象类型发送 header ，而不是 HTTPClient 声明中提供的 HttpHeaders。

当使用 Angular HttpClient 时，我想用 Object 传递 header ，我不明白如何定义类型的对象 [header: string]: string | string[]; 请帮助我理解这个对象声明。同样，我也面临 HttpParams。我的代码方法如下。

getLoggedInUser(requestHeaderParam: GetLoggedInUserHeaderRequestParam): Observable<LoggedInUserResponse> {
   return this.http.get<LoggedInUserResponse>(`${environment.apiBaseUrl}/auth/loggedInUser`,
    { headers: requestHeaderParam }); 
}

我在 VS 代码中得到的错误信息如下

[ts] Argument of type '{ headers: GetLoggedInUserHeaderRequestParam; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. Types of property 'headers' are incompatible. Type 'GetLoggedInUserHeaderRequestParam' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'. Type 'GetLoggedInUserHeaderRequestParam' is not assignable to type '{ [header: string]: string | string[]; }'. Index signature is missing in type 'GetLoggedInUserHeaderRequestParam'.

请求参数类型如下

export interface GetLoggedInUserHeaderRequestParam {
  uid: string;
  PSID?: string;
}

HttpClient 声明如下。

HttpClient.get(url: string, options: {
   headers?: HttpHeaders | {
    [header: string]: string | string[];
   };
   observe?: "body";
  params?: HttpParams | {
    [param: string]: string | string[];
  };
  reportProgress?: boolean;
  responseType: "arraybuffer";
  withCredentials?: boolean;
}): Observable<ArrayBuffer>

请帮忙!!!

注意:我的问题不是如何使用 HttpHeaders，我知道如何使用 HttpHeaders，我的问题是如何直接使用声明类型之一中提到的 Object { [标题:字符串]:字符串 |字符串[]; } 在 HttpClient

Answer 1

问题是 GetLoggedInUserHeaderRequestParam 和 Headers 直接对象的签名不同

例如

  export interface GetLoggedInUserHeaderRequestParam {
      uid: string;
      PSID?: string;
    }

只接受带有 uid 和可选的 PSID 的对象，而 Headers 直接对象

   {
      [header: string]: string | string[];
   }

表示它可以接受具有任意数量的字符串类型键和值作为字符串或字符串数​​组的对象。

关键区别在于你的接口(interface)强制 Typescript 接受具有精确键名的对象，其中 header 对象可以接受任意数量的字符串类型的键，如

{
  "uid" : "1234",
  "PSID" : "1223",
  "name" : "test",
  ..... 
}

你可以通过定义接口(interface)来解决问题

interface GetLoggedInUserHeaderRequestParam {
    [name: string] : string | string[];

}

并调用 HTTP 方法作为

let header: GetLoggedInUserHeaderRequestParam  = {
  "uid" : "1234",
  "PSID" : "1234"
}

getLoggedInUser(header);