Angular 12 如何将HTTP Observable返回的对象数组转为自定义类实例

TypeScript的泛型仅为编译时类型校验，不会做运行时的实例转换。HttpClient.get返回的是后端JSON反序列化后的普通JS对象，原型链上没有Item类定义的getter和成员方法，才会出现getter无返回、调用方法报错的问题。

步骤1：完善Item类的实例化逻辑 #

新增支持从普通对象创建实例的构造函数，可选搭配静态转换方法：

export class Item {
  id: string;
  title: string;
  created: string;

  // 新增构造函数，接收普通对象参数直接赋值
  constructor(item: Partial<Item>) {
    Object.assign(this, item);
  }

  get parsedTitle() {
    const t = this.title;
    // 保留原有title解析逻辑
    return t;
  }

  // 也可按需使用静态方法的写法，二选一即可
  static fromJSON(item: Record<string, any>): Item {
    return new Item(item);
  }
}

步骤2：修改Service请求逻辑，加入实例转换 #

通过RxJS的map操作符遍历返回结果，将普通对象批量转为Item类实例：

import { map } from 'rxjs/operators';

// 其他原有代码省略
public list(): Observable<Array<Item>> {
  return this.http.get<Array<Record<string, any>>>(url).pipe(
    // 遍历返回数组，每个普通对象转为Item实例
    map(res => res.map(item => new Item(item)))
    // 如果用静态方法写法，替换为 map(res => res.map(Item.fromJSON))
  );
}

Component原有订阅逻辑无需修改，后续在HTML中直接使用{{ item.parsedTitle }}即可正常输出处理后的标题，后续新增的普通成员方法也能正常调用。

• 如果Item类包含嵌套的自定义类属性，需要对嵌套属性也做对应实例转换，仅用Object.assign只会赋值普通对象，不会生成对应类的实例。

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