Angular, observable pipe limit?

user_201381 0
Viewed 304

I'm doing this in one of my route guards...

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    // go through each check sequentially, stop process if one does throwError
    return of(true).pipe( // Is there a limit to operators in a pipe???
      switchMap(() => of(true)), // simplified for this post...usually call a function that returns
      switchMap(() => of(true)),
      switchMap(() => of(true)),
      switchMap(() => of(true)),
      switchMap(() => of(true)),
      switchMap(() => of(true)),
      switchMap(() => of(true)),
      switchMap(() => of(true)),
      // if any function returns throwError, we skip other checks
      catchError(() => of(false))
    );
  }

I'm running into an error. If there is one more switchMap added to the list, VSCode tells me... "Type 'Observable<{}>' is not assignable to type 'Observable'. Type '{}' is not assignable to type 'boolean'.ts(2322)"

Can somebody explain to me why that's the case? I can't figure it out and find related issues.

rxjs-observables angular visual-studio-code
1 Answers

This is pretty well explained in this github issue.

The gist of it is that only 9 operators are supported - any more and it will fall back to type Observable<{}> since they have to manually type everything up to 9 operators.

Use multiple pipes (maintains typesafety after the 9nth entry)

If you still want to maintain typesafety but add more than 9 operators, just call the pipe function again.

source$
  .pipe(
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    tap(() => {})
  )
  .pipe(
    // Add the next operators after the 9nth here
    tap(() => {}) 
  )

Manually assert the resulting type

Alternatively, you can add a manual type assertion at the end. Beware though: After the 9nth operator, the type will be infered as Observable<{}>, effectively losing typesafety.

const source$:Observable<boolean> = of(true)
  .pipe(
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    tap(() => {}),
    // Typesafety is lost here
    tap(() => {}),
    tap(() => {}),

  // Manually assert the type at the end 
  // Beware that the compiler will allow pretty much anything here,
  // so "as Observable<string>" would work, even though it'd be wrong.
  ) as Observable<boolean>;
user_65137230
Related