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

问题描述

我有一个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){

    }
}

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

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

解决方案

您不能做自己正在做的事情.

当您从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类中未定义的属性，您也会遇到性能问题.

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)
      );
  }

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){

    }
}

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.

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.

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 was not created with a call to new Product and so it doesn't share its methods.

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 way you turn this._product into a real Product instance, including its methods.

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);

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 Service-返回的对象类型是object，而不是指定的通用类型的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！