Тип Наблюдаемый <{} | AppUser> не может быть назначен на <AppUser>RxJS оператора

Question

Используя Angular 6.1 и RxJs 6, я пытаюсь реализовать распознаватель для компонента для отдельного пользователя.

Мой userService http вызов это:

getUserById(id: string): Observable<AppUser> {
    return this.http.get<AppUser>(this.baseURL + id, httpOptions);
}

И мой распознаватель:

import { Injectable } from "@angular/core";
import { Resolve, Router, ActivatedRouteSnapshot } from "@angular/router";
import { AppUser } from "../models/User/IAppUser";
import { UserService } from "../services/users/user.service";
import { AlertifyService } from "../../coreModule/alertify/alertify.service";
import { Observable, of } from "rxjs";
import { catchError } from "rxjs/operators";

@Injectable()
export class UserDetailResolver implements Resolve<AppUser> {
  constructor(
    private userService: UserService,
    private router: Router,
    private alertify: AlertifyService
  ) { }

  resolve(route: ActivatedRouteSnapshot): Observable<AppUser> {
    return this.userService.getUserById(route.params['id'])
      .pipe(
        catchError(error => {
          this.alertify.error('Problem retrieving data');
          this.router.navigate(['/home']);
          return of(null)
        })
      );
  }

Но поскольку я пытаюсь вернуть ноль вместо AppUser, машинопись выдает ошибку. Не уверен, что я делаю неправильно, так как я думал, что rxjs of должен справиться с этим.

Answer 1

Попробуйте

of(null as AppUser)

или

of(undefined as AppUser)

Answer 2

Я мог бы что-то упустить, но у вас есть метод, который объявлен для возврата потока AppUser, который реализует интерфейс Resolve<AppUser>. И с catchError + of(null) этот метод эффективно возвращает поток либо null, либо AppUser. Как справедливо жалуется компилятор TS.

Чтобы исправить это, вы можете либо вернуть EMPTY наблюдаемый . Он не выдает значений и сразу завершает работу. NEVER - это еще одна постоянная наблюдаемая, которая никогда не испустит и никогда не завершит. Выберите тот, который вам нужен. Э.Г.

catchError(()=>{
  // ...
  return EMPTY;
})

ПРИМЕЧАНИЕ. При таком подходе вам может потребоваться приведение типов, например EMPTY as Observable<AppUser>. Хотя это будет честный актерский состав - поскольку пустая наблюдаемая может быть любого типа наблюдаемой.

или , если вам нужно выдать значение null в поток - объявите метод как возвращающий Observable<AppUser | null>, который является фактическим типом, который он возвращает в данный момент. И вам придется также обновить Resolve<AppUser> до Resolve<AppUser | null>.

==

, чтобы подчеркнуть это:
В большинстве случаев вы не хотите лгать своей системе печати и принудительно приводите тип Observable<null | AppUser> к Observable<AppUser>.

==

Надеюсь, это поможет