Angular 服务 - 返回的对象类型是对象，而不是指定的泛型类型

Question

我有一个 angular5 服务，它执行 HTTP 获取并返回特定类型，如下所示

public getProductByIDproductId: string): Observable<Product> {
    const headers = new HttpHeaders({ "Content-Type": "application/json" });
    const url = `${environment.productservice_baseurl}/${productId}`;
    return this.http
      .get<Product>(url, { headers: headers })
      .pipe(       
        tap(data => (this._product = data)),
        catchError(this.handleError)
      );
  }

Product 类是一个具有属性和方法的类。下面是一小段摘录。

class Product{
    productID:string;
    productName:string;

    setQuantity(quantity:number){

    }
}

当我对 get 返回的 this._product 调用 setQuantity 函数时，出现“setQuantity 不是函数”错误。当我尝试检查 this._product 的实例时，它不是 Product 类型，而是 Object 类型。

在 get 方法上设置泛型类型只是为了帮助编译时类型检查吗？如何从 getProductByIDproductId 方法获取产品类的具体实例？

Answer 1

你不能做你正在做的事。

当您从 URL 获取数据时，您得到的只是 JSON。您是在告诉 TypeScript data 是 Product 类型，但这只是对编译器的提示，并没有让它成为现实。

data 不是通过调用 new Product 创建的，因此它不共享其方法。

如果您希望您的 this._product 表现得像 native Product 实例，您可以这样做:

this._product = data;
Object.setPrototypeOf(this._product, Product.prototype);

这样您就可以将 this._product 变成一个真正的 Product 实例，包括它的方法。

另一种选择，如果您担心 setPrototypeOf 及其潜在的性能缺陷，可以这样做:

this._product = new Product();
Object.assign(this._product, data);

当然，只有当 Product 具有无参数构造函数时，这才是一个好主意。而且，在任何情况下，如果 data 具有未在 Product 类中定义的属性，您也可能会遇到性能问题。