Angular Rxjs: синтаксическая ошибка с использованием конвейерных операторов

Question

Я пытаюсь переписать этот код:

Observable
    .merge(this.searchQuery$, this.lazyQuery$)
    .do(() => this.loadingPage())
    .map(filter => this.buildURL("jaume", Config.security['appName'], filter))
    .switchMap(url =>
        this.service.getItemsFromStorage(url)
        .map(response => this.buildPage(response))
        .catch(() => Observable.of(pojo.Page.EMPTY))
    )
    .do(page => this.loadedPage(page))
    .takeUntil(this.unsubscribe$)
    .subscribe();

Я хочу использовать синтаксис "pipable".До сих пор я мог написать, что:

this.searchQuery$.pipe(
    merge(this.lazyQuery$),
    tap(() => this.loadingPage()),
    map(filter => this.buildURL("jaume", Config.security['appName'], filter))
)
.pipe(
    switchMap(url => this.service.getItemsFromStorage(url)),
    catchError(() => Observable.of(pojo.Page.EMPTY))
)
.pipe(
    tap(page => this.loadedPage(page))  <<***>>
);

Я получаю сообщение об ошибке компиляции на <<***>>:

Аргумент типа 'Response |Страница «не может быть назначена параметру типа« Страница ».Типу "Ответ" не хватает следующих свойств типа "Страница": всего, пользователи

Похоже, что catchError возвращает тип {} | Page, когда он должен возвращать один тип Page.

Есть идеи?

Answer 1

Вы пропустили отображение response на page.

merge(this.searchQuery$, this.lazyQuery$).pipe(
  tap(() => this.loadingPage()),
  map(filter => this.buildURL("jaume", Config.security['appName'], filter)),
  switchMap(url => this.service.getItemsFromStorage(url).pipe(
    map(response => this.buildPage(response)), // <-- you missed this map in your code
    catchError(() => of(pojo.Page.EMPTY))
  )),
  tap(page => this.loadedPage(page)),
  takeUntil(this.unsubscribe$)
).subscribe();

Также ознакомьтесь с официальным руководством по миграции: Howto: преобразование в синтаксис канала

Answer 2

Прежде всего, слишком много труб. Там не нужно так много. Также вы можете использовать of() вместо Observable.of(), что короче и ИМХО легче читать.

this.searchQuery$.pipe(
    merge(this.lazyQuery$),
    tap(() => this.loadingPage()),
    map(filter => this.buildURL("jaume", Config.security['appName'], filter)),
    switchMap(url => this.service.getItemsFromStorage(url)),
    catchError(() => of(pojo.Page.EMPTY)),
    tap(page => this.loadedPage(page))  <<***>>
);

Это будет отлично работать.

Ваша ошибка не в том, что она возвращает, а в том, что TypeScript считает, она возвращает. Таким образом, вы должны просто сказать, что это возвращает. Например

...
catchError(() => of(<Page>pojo.Page.EMPTY))
...

Если это действительно раздел catchError.

Обновление № 1 - Вложение

Если вам нужно применить какую-то конкретную трубу к единственной точке в цепочке, вы должны добавить эту трубу, где возвращается наблюдаемая. Например

...
switchMap(() => of(null).pipe(
  catchError(...)
))

Когда вы делаете

.pipe(...),
.pipe(...),
.pipe(...),

Это эквивалент

.pipe(
...
...
...
)