键入'Observable <{} | IProduct []>'不可分配给'Observable <iproduct []>'类型

Question

当前正在通过Deborah Kurata course on Angular 6

我已经完成了Observables模块的操作，但是在我的products.service中遇到了跟踪错误。

我找到了this answer here，但是我已经做到了，并且不认为这实际上是解决这里遇到的问题的原因。

我在这里也发现了这个问题，但该修复方法无效： https://github.com/angular/angular/issues/20349

假定此修复程序仅为return Rx.Observable.of，但of上没有Observable。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, tap } from 'rxjs/operators';
import { Observable } from 'rxjs';

// Interfaces
import { IProduct } from './product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private productUrl = 'api/products/products.json';

  constructor(private http: HttpClient) {}

  getProducts(): Observable<IProduct[]> {
    return this.http.get<IProduct[]>(this.productUrl).pipe(
      tap(data => console.log('All: ' + JSON.stringify(data)))
    );
  }
}

---

我发现，如果仅更改返回到代码传递的Observable的类型，但我觉得这是一种作弊，我失去了Typescript的好处：

getProducts(): Observable<any> {
  return this.http.get<IProduct[]>(this.productUrl).pipe(
    tap(data => console.log('All: ' + JSON.stringify(data))),
    catchError(this.handleError)
  );
}

Answer 1

您基本上可以将鼠标悬停在.pipe上以检查其返回值。

.tap仅返回它得到的内容。但是我认为catchError可能会返回Object。因此，将其返回类型假定为Observable<{}|IProduct[]>。

修复1。。在这种情况下，请使用此功能。

getProducts(): Observable<{}|IProduct[]> {
  return this.http.get<IProduct[]>(this.productUrl).pipe(
    tap(data => console.log('All: ' + JSON.stringify(data))),
    catchError(this.handleError)
  );
}

在接收组件中，您可能想要执行以下操作：

products => { this.products = products as IProduct[] };

修复2。如果您不想更改退货类型，然后在已订阅此观察值的位置修改代码，只需在此处删除catchError：

getProducts(): Observable <IProduct[] > {
  return this.http.get < IProduct[] > (this.productUrl).pipe(
    tap(data => console.log('All: ' + JSON.stringify(data)))
  );
}

修复3。或只是简单地摆脱.pipe。无论如何，您正在使用.tap进行日志记录。因此，它不会为您的代码增加任何价值。就捕获错误而言，您可以在HttpInterceptor中或在您将subscribing转到此方法返回的位置的位置进行操作。

getProducts(): Observable<IProduct[]> {
  return this.http.get<IProduct[]>(this.productUrl);
}