Angular Service-返回的對象類型是object而不是指定的通用類型的對象

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

產品類是具有屬性和方法的類。 下面是一個小摘錄。

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類中定義的屬性，則還可能會遇到性能問題。

Answer 2

您可以例如映射響應。

return this.http
  .get<Product>(url, { headers: headers })
  .map(response => new Product(response)) // I don't know your constructor
  .pipe(       
    tap(data => (this._product = data)),
    catchError(this.handleError)
  );

這樣，您可以確保您的對象將是您定義的Typescript對象。

編輯您只需幾行即可“手動”創建對象：

export class Product {
  // Your class ...

  public static createProductFromHttpResponse = (response: any) => {
    const ret = new Product();
    for (let key in response.key) { ret[key] = response[key]; }
    return ret;
  }
}

在您的映射中：

  .map(response => Product.createProductFromHttpResponse(response))

Answer 3

據我所知，要指定響應類型，應該使用接口而不是類，因此您的產品應該是接口：

interface Product{
productID:string;
productName:string;

}

而且因為它只是接口和http響應，所以它不應具有任何方法

編輯

@trichetriche的答案可能是此問題的解決方案之一。