Angular 6 和类型化 API 数据

Question

我对 Angular 和 typescript 非常陌生，并且一直在阅读一些关于返回类型化数据的帖子。有些文章声明您必须在从服务返回对象后映射您的对象，其他文章只需在调用中键入结果。 Angular 6 中获取强类型数据的最简单方法是什么？以下不起作用我真的需要手动映射每个属性吗？

我的模特：

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

我的服务：

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

呼叫：

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

});

JSON 结果：

[{"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 }],

拦截器：

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

你读到的所有文章都是正确的。

当您执行this.httpClient.get<YourType> 之类的操作时，这称为类型断言。这意味着您会将生成的对象视为 YourType，它将在您的 IDE 中启用自动完成功能，在调用未定义属性时在编译时抛出错误等......但该对象不会是 YourType 的真实实例在运行时。

如果YourType 只包含属性，那么就像您将它用作interface，所以没关系：您只是防止自己误用您的对象。另一方面，当转译为 Javascript 时，类型将永远不会显示，您的对象将显示为文字对象。

如果YourType 包含您要在实例化对象上调用的非静态函数、getter、setter，那么您必须添加一个映射this.httpClient.get<YourType>("url").pipe(map(x => new YourType(x)) 和一个构造函数：

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

这样你会得到YourType的真实实例