Angular 5：如何将JSON映射为User类实例？

嘿，我懂你现在的困惑——Angular的HttpClient虽然支持类型断言，但它并不会自动把返回的JSON转换成你定义的User类实例，只是给代码加了类型提示而已。下面给你几种实用的解决办法：

方法一：手动实例化并赋值 #

这是最直接的方式，在subscribe回调里创建User实例，然后通过类的setter方法把JSON里的属性值传进去：

public loadUser(): void {
  this._http.post<User>(Global.url + '/user/show', {}).subscribe(
    data => {
      this.$user = new User();
      // 调用setter方法给私有属性赋值
      this.$user.setCode(data.code);
    }
  );
}

方法二：给User类添加静态工厂方法 #

如果需要多次做这种映射，推荐给User类加一个静态的fromJson方法，把JSON转实例的逻辑封装起来，代码会更整洁：

首先修改你的User类：

export class User {
  private code: string;
  get Code(): string {
    return this.code;
  }
  public setCode($code: string) {
    this.code = $code;
  }

  // 新增静态工厂方法，从JSON生成User实例
  static fromJson(json: { code: string }): User {
    const userInstance = new User();
    userInstance.setCode(json.code);
    return userInstance;
  }
}

然后在组件里调用这个方法：

public loadUser(): void {
  this._http.post<{ code: string }>(Global.url + '/user/show', {}).subscribe(
    data => {
      this.$user = User.fromJson(data);
    }
  );
}

为什么不能直接用post<User>？ #

这里要提醒一下：HttpClient.post<User>(...)只是TypeScript的类型断言，它告诉编译器“把返回的数据当作User类型”，但实际上返回的还是一个普通的JavaScript对象，并没有User类的实例方法和私有属性的封装逻辑，所以必须手动实例化才能得到真正的User类对象。

内容的提问来源于stack exchange，提问作者Echarbeto