Question

我将Angular项目从v5迁移到了v6。

为了更新所有导入，我已经运行rxjs-5-to-6-migrate：

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

但是现在我有如下错误：

src/app/products/product.service.ts(54,4): error TS2322: Type 'Observable<{}>' is not assignable to type 'Observable<{ count: number; next: string; previous: string; results: any[]; }>'.
  Type '{}' is not assignable to type '{ count: number; next: string; previous: string; results: any[]; }'.
    Property 'count' is missing in type '{}'.

product.service.ts ：

import { Injectable } from '@angular/core';
//import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';

import { catchError, map, tap, finalize } from 'rxjs/operators';

import { Product } from './product';

import { SpinnerService } from './../utilities/spinner/spinner.service';

import { environment } from '../../environments/environment';

const endpoint = environment.apiHost+'/api/products/' //'http://127.0.0.1:8000/api/products/'

@Injectable()
export class ProductService {

  /* Caching few data that does not change so often */
  private productTypes: any[];
  private departments: any[];
  private authors: any[];
  private colors: any[];
  private sizeRuns: any[];

  constructor(private http: HttpClient, private _spinnerService: SpinnerService) { }

  list(params?): Observable<{count:number, next:string, previous:string, results: any[]}> {
    return this.http.get<{count:number, next:string, previous:string, results: any[]}>(endpoint, {params: params})
      .pipe(
        catchError(this.handleError<any>('Retrieving products'))
      );
  }

  /**
   * Handle Http operation that failed.
   * Let the app continue.
   * @param operation - name of the operation that failed
   * @param result - optional value to return as the observable result
   */
  private handleError<T>(operation='Operation', result?: T) {
    return (error: any): ErrorObservable | Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      console.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an Observable with empty result.
      //return of(result as T); 
      return new ErrorObservable(error);
    };
  }

}

我在StackOverflow上看到了其他类似问题，但我仍然不知道如何解决。我可能可以将界面{count:number, next:string, previous:string, results: any[]}更改为简单的any，但是我并不是真的想要这么做。有解决办法吗？

UPDATE1 ：使用界面

interface PaginatedList {
  count: number;
  next: string;
  previous: string;
  results: any[];
}

@Injectable()
export class ProductService {

  /* Caching few data that does not change so often */
  private productTypes: any[];
  private departments: any[];
  private authors: any[];
  private colors: any[];
  private sizeRuns: any[];

  constructor(private http: HttpClient, private _spinnerService: SpinnerService) { }

  list(params?): Observable<PaginatedList> {
    this._spinnerService.show('productListSpinner');
    return this.http.get<PaginatedList>(endpoint, {params: params})
      .pipe(
        catchError(this.handleError<any>('Retrieving products')),
        finalize(() => this._spinnerService.hide('productListSpinner'))
      );
  }

  /**
   * Handle Http operation that failed.
   * Let the app continue.
   * @param operation - name of the operation that failed
   * @param result - optional value to return as the observable result
   */
  private handleError<T>(operation='Operation', result?: T) {
    return (error: any): ErrorObservable | Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      console.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an Observable with empty result.
      //return of(result as T); 
      return new ErrorObservable(error);
    };
  }

}

错误：

src/app/products/product.service.ts(61,4): error TS2322: Type 'Observable<{}>' is not assignable to type 'Observable<PaginatedList>'.
  Type '{}' is not assignable to type 'PaginatedList'.
    Property 'count' is missing in type '{}'.

UPDATE2 ：

检查我的错误，我认为是ErrorObservable引起了其他错误：

src/app/products/product.service.ts(325,26): error TS2314: Generic type 'ErrorObservable<T>' requires 1 type argument(s).

Answer 1

我可能可以更改界面{count：number，next：string， previous：string，结果：any []}简化为任意`

通过此操作，您只会在脚上开枪。为什么不定义您所知道的概念的界面？

在处理错误时应该问自己的第一个问题：我需要优雅地还是优雅地处理它？</ p>

优雅地处理错误会将其转换为流中的“伪”通知，从而在大多数情况下保持其类型一致。例如：

import { throwError, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
// Create source Observable<string> that emits an error
const source : Observable<string> = throwError('This is an error!');
// Gracefully handle error, returning observable with error message
// Notice that the type contract of the source is mantained
const example : Observable<string> = source.pipe(catchError(val => of(`I caught: ${val}`)));
// Output: 'I caught: This is an error'
// Notice that the next, and not the error callback, is invoked
const subscribe = example.subscribe(
      val => console.log(val), 
      error => console.log("Something exploded: ", error));

在前面的示例中，我保留了源代码的类型协定。在下面我没有：

import { throwError, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
// Create source Observable<string> that emits an error
const source : Observable<string> = throwError('This is an error!');
// Gracefully handle error, returning observable with error message
// Notice that by mapping the error to a fake notification of another type, the new
// stream extends the type contract of the source
const example : Observable<string | number> = source.pipe(catchError(val => of(1)));
// Output: 'I caught: This is an error'
// Notice that the next, and not the error callback, is invoked
const subscribe = example.subscribe(
      val => console.log(val), 
      error => console.log("Something exploded: ", error));

另一种选择是通过基本应用一些逻辑然后重新抛出来优雅地处理错误。在这种情况下，the type contract of the stream has no information about the error that the stream could arise。例如：

import { throwError, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
// Create source Observable<string> that emits an error
const source : Observable<string> = throwError('This is an error!');
// Ungracefully handle error, re-throwing an object
const example : Observable<string> = source.pipe(catchError(error => throwError({message: 'Error caught', error})));
// Output: 'Something exploded: '
// Notice that the error, and not the next callback, is invoked
const subscribe = example.subscribe(
      val => console.log(val), 
      error => console.log("Something exploded: ", error));

回到您的问题；实际上，您的方法目前正在优雅地处理错误并扩展源流的类型协定，而没有正确声明方法的返回类型。

该错误的解决方案是将方法的签名更改为：

list(params?): Observable<PaginatedList | any>;

另一个问题是您直接使用ErrorObservable，这确实是实现细节。通常，您将使用throwError运算符。

Answer 2

您可以定义“或”运算符。

Observable<{count:number, next:string, previous:string, results: any[]}> |  Observable<any>

将Angular和RxJS 5迁移到6之后的错误-类型'Observable <{}>'不能分配给类型'Observable <....>'

2 个答案: