Angular HttpClient自动映射移除目标对象getter问题咨询

我懂你碰到的这个坑了——当你用HttpClient.post<Person>(...)的时候，TypeScript会让你觉得拿到的是Person类的实例，但实际上运行时它只是一个普通的JavaScript对象，根本不是Person类的实例，所以你定义的FullName getter自然就访问不到了。

为什么会这样？ #

这里要搞清楚：HttpClient的泛型<Person>只是TypeScript在编译阶段给你的类型提示，帮你做类型检查而已。运行时，API返回的JSON数据会被原生的JSON.parse()解析成普通JS对象，这个对象并没有链接到Person类的原型，所以类里定义的getter、方法都不会存在。

解决方法：手动实例化Person类 #

你需要把返回的普通JS对象转换成Person类的实例，这样才能访问到类里的getter。这里有几种常见的实现方式：

1. 用Object.assign快速赋值

最简单的方式就是创建一个Person的新实例，然后把返回的数据拷贝进去：

this.httpClient.post<Person>(url, body, { headers: headers, params: httpParams })
  .pipe(
    retry(ConfigurationService.apiHttpRetries),
    // 把普通对象转换成Person实例
    map(rawData => Object.assign(new Person(), rawData))
  )
  .subscribe(person => {
    console.log(person.FullName); // 现在能正常调用getter了
  });

2. 给Person类添加静态工厂方法

如果需要多次转换，推荐在Person类里写一个静态方法来封装转换逻辑，代码更整洁：

export class Person {
  firstName: string;
  lastName: string;

  get FullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

  // 静态方法：从JSON数据创建Person实例
  static fromJson(data: Partial<Person>): Person {
    const person = new Person();
    Object.assign(person, data);
    return person;
  }
}

然后在请求里这样用：

map(rawData => Person.fromJson(rawData))

3. 用构造函数接收参数

如果Person的属性不多，也可以直接在构造函数里接收参数来创建实例：

export class Person {
  constructor(public firstName: string, public lastName: string) {}

  get FullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}

对应的转换逻辑：

map(rawData => new Person(rawData.firstName, rawData.lastName))

注意事项 #

如果Person类里包含其他自定义类的属性（比如Address类），那你需要在转换的时候手动处理这些嵌套对象的实例化，不然它们还是普通的JS对象，同样会丢失对应的方法和getter。比如：

static fromJson(data: Partial<Person>): Person {
  const person = new Person();
  Object.assign(person, data);
  // 手动把嵌套的address转换成Address实例
  if (data.address) {
    person.address = Address.fromJson(data.address);
  }
  return person;
}

总之，核心思路就是：HttpClient不会自动帮你实例化自定义类，泛型只是编译时的类型提示，必须手动把返回的普通JS对象转换成类的实例，才能访问类的getter和方法。

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