Angular Service - 返回的对象类型是object而不是指定的泛型类型

Question

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

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的行为类似于本机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类中没有定义属性,您也可能遇到性能问题.