Angular 4到5升級-Observable.of

Question

我試圖更新一些Angular 4 / rxjs代碼以使用新的版本5語法，但遇到了一些麻煩。

原始進口聲明：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import Properties from './properties';
import ErrorHandler from './error-handler';

//From vendor.ts
import 'rxjs/Subject'
import 'rxjs/BehaviorSubject';
import 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/timeoutWith';
import 'rxjs/add/operator/retryWhen';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/publishReplay';
import 'rxjs/Subscription';

原始代碼：

downloadStatus(job : DownloadJob) : Observable<DownloadJob> {
    let params = {"jobId": job.id};
    return this.http.post(Properties.URLS.core.downloadStatus.href, params, this.getOptions())
                .retryWhen((errors) => {
                    return errors.mergeMap((error) => (error.status === 404) ? Observable.of(error) : Observable.throw(error))
                                    .delay(Properties.SETTINGS.download.pollInterval);
                })
                .timeoutWith(Properties.SETTINGS.download.timeout, Observable.of<DownloadJob>(job))
                .map(this.extractData).catch(ErrorHandler.handleError);
}

更新的導入聲明：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { map, catchError, retryWhen, timeoutWith, flatMap, mergeMap, delay } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import Properties from './properties';
import ErrorHandler from './error-handler';
//From vendor.ts
import 'rxjs/Subject'
import 'rxjs/BehaviorSubject';
import 'rxjs/Observable';
import 'rxjs/operators/catchError';
import 'rxjs/operators/filter';
import 'rxjs/operators/map';
import 'rxjs/operators/switchMap';
import 'rxjs/operators/mergeMap';
import 'rxjs/operators/debounceTime';
import 'rxjs/operators/timeoutWith';
import 'rxjs/operators/retryWhen';
import 'rxjs/operators/delay';
import 'rxjs/operators/distinctUntilChanged';
import 'rxjs/operators/publishReplay';
import 'rxjs/observable/of';
import 'rxjs/Subscription';

更新的代碼：

downloadStatus(job : DownloadJob) : Observable<DownloadJob> {
    let params = {"jobId": job.id};
    return this.http.post(Properties.URLS.core.downloadStatus.href, params, this.getOptions()).pipe(
                retryWhen((errors) => {
                    return errors.pipe(
                                mergeMap((error) => (error.status === 404) ? of(error) : Observable.throw(error)),
                                delay(Properties.SETTINGS.download.pollInterval)
                    );
                }),
                timeoutWith(Properties.SETTINGS.download.timeout, of(job)),
                map(this.extractData),
                catchError(ErrorHandler.handleError)
    );
}

錯誤信息：

TS2345: Argument of type 'UnaryFunction<Observable<DownloadJob>, Observable<DownloadJob>>' is not assignable to parameter of type 'UnaryFunction<Observable<Response>, Observable<DownloadJob>>'.
  Types of parameters 'source' and 'source' are incompatible.
    Type 'Observable<Response>' is not assignable to type 'Observable<DownloadJob>'.
      Type 'Response' is not assignable to type 'DownloadJob'.
        Property 'id' is missing in type 'Response'.

我遇到的問題是timeoutWith函數中從Observable.of（job）到of（job）的轉換。 TypeScript編譯器現在（可以理解）抱怨能夠分配對象類型。

使用這種新語法，我該如何解決？

提前致謝！

Answer 1

似乎您需要在某處retryWhen()一個map(response => response.json() as DownloadJob) （可能在retryWhen()之前）。

抱怨post()返回Observable<Response> timeoutWith() ，而timeoutWith()返回DownloadJob timeoutWith() 。

您以前沒有看到過這個問題，因為舊的原型樣式timeoutWith是錯誤的。 它仍然將返回類型顯示為Observable<Response>並且忽略了傳遞給它的參數的類型。

Answer 2

我想我找到了解決方法。 我對rxjs和Observable有點陌生，但我認為這是等效的：

downloadStatus(job : DownloadJob) : Observable<DownloadJob> {
    let params = {"jobId": job.id};
    return this.http.post(Properties.URLS.core.downloadStatus.href, params, this.getOptions()).pipe(
                retryWhen((errors) => {
                    return errors.pipe(
                                mergeMap((error) => (error.status === 404) ? of(error) : Observable.throw(error)),
                                delay(Properties.SETTINGS.download.pollInterval)
                    );
                }),
                timeoutWith(Properties.SETTINGS.download.timeout,
                            Observable.create(observer => {
                                observer.next(job);
                                observer.complete();
                            })),
                map(this.extractData),
                catchError(ErrorHandler.handleError)
    );