Angular 6 and typed API data

Question

I am very new to Angular and typescript and have been reading some posts about returning typed data. Some articles state you have to map your objects after returning them from the service, others just type the result in the call. What the easiest way in Angular 6 to get strongly typed data? The below doesn't work do I really need to map each property manually?

My model:

export interface MenuItem {
    menuItemsId:number;
    groupCode: number;
    groupDescription: string;
    subGroupCode:number;
    subGroupDescription:string;
    itemCode:number;
    itemDescription:string;
    grade:string;
    remark:string;
}

My service:

getValues():Observable<MenuItem[]>{
return  this.httpClient.get<MenuItem[]>("https://hafnia-asset-control-dev.azurewebsites.net/api/menuitems/cosmetic");  
}

Call:

var t = this.apiService.getValues().subscribe((data) => {
  this.menuItems  =  data;
  console.log(this.menuItems);

});

JSON result:

[{"menuItemsId":1,"groupCode":1000,"groupDescription":"xxx","subGroupCode":1000,"subGroupDescription":"SHELL","itemCode":1001,"itemDescription":"ccc","grade":"Int","remark":"String"},{"menuItemsId":2,"groupCode":1000,"groupDescription":"COSMETIC","subGroupCode":1000,"subGroupDescription":"xxx","itemCode":1002,"itemDescription":"xxx","grade":"Int","remark":"String"}

app.module:

providers: [AdalService, AdalGuard,{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }],

Interceptor:

import { Injectable } from '@angular/core';
import { HttpEvent,HttpHandler,HttpRequest,HttpInterceptor } from '@angular/common/http';
import { AdalService } from 'adal-angular4';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private adalService: AdalService) { }

    intercept(req: HttpRequest<any>, next:HttpHandler): Observable<HttpEvent<any>>{
        const authHeader = this.adalService.userInfo.token;

        const authReq = req.clone({headers: req.headers.set('Authorization', `Bearer ${authHeader}`)});
        return next.handle(authReq);
    }

}

Answer 1

All of the articles you read are somehow right.

When you do things like this.httpClient.get<YourType>, this is called type assertion. That means you will be treating the resulting object as a YourType, it will enable autocompletion in your IDE, throw errors at compilation when calling undefined properties, etc... but the object won't be a real instance of YourType at runtime.

If YourType contains only properties, then it's like you're using it as an interface, so it's fine: you just prevent yourself from misusing your object. On the other hand, when transpiled to Javascript, the type will never show and your objects will appear as literal objects.

If YourType contains non-static functions, getters, setters, that you want to call on instantiated objects, then you have to add a map this.httpClient.get<YourType>("url").pipe(map(x => new YourType(x)) and a constructor:

class YourType {
   // Properties...
   constructor(obj: any) {
      Object.assign(this, obj);
   }
}

This way you'll get real instances of YourType