TypeScript自定义类重写JavaScript Object toString()方法问题咨询

先还原你的场景和代码：你定义了一个继承自Person的Client类，用作Angular 5模板的模型，代码如下：

export class Client extends Person {
  claimNumber: string;
  policyNumber: string;
  address: string;
  insuranceCompany: Organisation = new Organisation();
  toString(): string {
    return this.policyNumber.concat(this.claimNumber);
  }
}

之后你在组件中通过Angular 5的HttpClient获取数据，但遇到了问题，多方查找都没找到解决方案。

结合这个场景，最常见的问题就是HttpClient返回的JSON对象无法自动映射为Client类的实例，导致模板中无法正确访问类的属性或方法（比如toString()，或者insuranceCompany的默认实例）。下面给你几个针对性的解决思路：

• 手动映射JSON数据到Client实例
  HttpClient默认会把返回的JSON转为普通JavaScript对象，不会创建类的实例。所以你需要手动将对象转换为Client实例：

  import { HttpClient } from '@angular/common/http';
  import { Client } from './client.model';
  
  // 在组件/service中
  constructor(private http: HttpClient) {}
  
  getClientData(): void {
    this.http.get('/api/client').subscribe((data: any) => {
      // 创建Client实例并赋值属性
      const client = new Client();
      Object.assign(client, data);
      // 如果insuranceCompany也需要转为Organisation实例，也要手动处理
      if (data.insuranceCompany) {
        client.insuranceCompany = Object.assign(new Organisation(), data.insuranceCompany);
      }
      // 之后把client绑定到模板即可
      this.client = client;
    });
  }
  

• 创建类的静态工厂方法
  为了更优雅地处理实例化，可以在Client类里添加一个静态方法来生成实例：

  export class Client extends Person {
    claimNumber: string;
    policyNumber: string;
    address: string;
    insuranceCompany: Organisation = new Organisation();
    toString(): string {
      return this.policyNumber.concat(this.claimNumber);
    }
  
    static fromJson(data: any): Client {
      const client = new Client();
      Object.assign(client, data);
      if (data.insuranceCompany) {
        client.insuranceCompany = Organisation.fromJson(data.insuranceCompany);
      }
      return client;
    }
  }
  

  然后在HttpClient请求中使用：

  getClientData(): void {
    this.http.get('/api/client').subscribe((data: any) => {
      this.client = Client.fromJson(data);
    });
  }
  

• 检查模板绑定是否正确
  如果是模板中无法显示属性，要确保你已经把client实例正确赋值给组件的属性，并且模板中用了正确的绑定语法，比如：

  <div>Policy Number: {{ client?.policyNumber }}</div>
  <div>Claim Number: {{ client?.claimNumber }}</div>
  <div>Combined: {{ client?.toString() }}</div>
  

  注意使用?.安全导航操作符，避免在数据未加载时出现空指针错误。

如果你的问题不是这个方向，可以补充下具体的错误现象（比如控制台报错、模板不显示数据等），我再帮你进一步排查！

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