Understanding complex Type Script Type declaration

Question

Question is about how to use the object type for sending headers, other than HttpHeaders provided in the HTTPClient declaration.

When using Angular HttpClient, I want to pass the headers with Object, I couldn't understand how to define an object of type [header: string]: string | string[]; Please help me to understand this object declaration. Same i am facing for HttpParams as well. My code approach as below.

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

The error message i am getting in VS code as below

[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'.

The Request Param type as below

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

The HttpClient Declaration as below.

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>

Please help!!!

Note: My Question is not how to use HttpHeaders, I get how to use the HttpHeaders, My question is how to use the Object directly as mentioned in one of its declaration type { [header: string]: string | string[]; } in the HttpClient

Answer 1

Problem is difference in signature of GetLoggedInUserHeaderRequestParam and Headers direct object

for example

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

only accept object with uid and optional PSID wherease Headers direct object

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

Says it can accept object with any number of keys of type string and value as string or array of string.

key difference is your interface force Typescript to accept object with exact key name where header object can accept any number of key with type string like

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

you can solve problem by define interface as

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

}

and call HTTP method as

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

getLoggedInUser(header);

Answer 2

it should be something like this:

headers is HTTP headers. what you provide is data

getLoggedInUser(requestHeaderParam: GetLoggedInUserHeaderRequestParam): Observable<LoggedInUserResponse> {

     let headers = new HttpHeaders();
     headers = headers.set('Content-Type', 'application/json');

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

for params:

    import {HttpParams} from "@angular/common/http";

getLoggedInUser(requestHeaderParam: GetLoggedInUserHeaderRequestParam): Observable<LoggedInUserResponse> {

    const params = new HttpParams()
        .set('uid', requestHeaderParam.uid)
        .set('PSID', requestHeaderParam.PSID);

     return this.http.get<LoggedInUserResponse>(`${environment.apiBaseUrl}/auth/loggedInUser`, 
        {params:params}); 
}