Angular 服务 - 返回的对象类型是对象而不是指定的泛型类型 [英] Angular Service - Type of object returned is object and not that of the generic type specified

问题描述

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

I have an angular5 service which does an HTTP get and returns a specific type as shown below

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 类是一个具有属性和方法的类.下面是一小段摘录.

The Product class is a class which has properties and methods. A small excerpt is below.

class Product{
    productID:string;
    productName:string;

    setQuantity(quantity:number){

    }
}

当我在 get 返回的 this._product 上调用 setQuantity 函数时，我收到setQuantity 不是函数"错误.当我尝试检查 this._product 的实例时，它不是 Product 类型，而是 Object 类型.

When I call the setQuantity function on this._product returned by the get I get a 'setQuantity is not a function' error. When I try to check the instance of this._product, it is not of type Product but if type Object.

get 方法上设置的泛型类型是否仅用于帮助编译时类型检查?如何从 getProductByIDproductId 方法获取产品类的具体实例?

Is the generic type set on the get method only to help compile-time type checking? How do I get a concrete instance of the product class from getProductByIDproductId method?

推荐答案

你不能做你正在做的事情.

You can't do what you're doing.

当您从 URL 获取数据时，您只会得到 JSON.您告诉 TypeScript data 属于 Product 类型，但这只是对编译器的提示，并不能使其成为真实.

When you fetch data from an URL, you get just JSON. You're telling TypeScript that data is of type Product, but that is just a hint for the compiler and does not make it true.

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

data was not created with a call to new Product and so it doesn't share its methods.

如果你想让你的 this._product 表现得像一个原生的 Product 实例，你可以这样做:

If you want your this._product to behave like a native Product instance, you can do this:

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

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

This way you turn this._product into a real Product instance, including its methods.

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

Another option, if you are worried about setPrototypeOf and its potential performance drawback, is doing it this way:

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

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

Of course, this is only a good idea if Product has a parameterless constructor. And, in any case, if data has properties not defined in Product class you can also run into performance issues.

这篇关于Angular 服务 - 返回的对象类型是对象而不是指定的泛型类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！