typescript - Angular 11 med rxjs-problem - TS2769: Ingen overbelastning samsvarer med dette kallet

Jeg vil abonnere på NavigationEnd-hendelser i Angular 11, mens jeg bruker filter fra rxjs.

Delen av subscribe((event: NavigationEnd) ... forårsaker følgende problem

Nåværende løsning:

TS2769: Ingen overbelastning passer for dette anropet. Overbelastning 1 av 5, '(observer?: NextObserver | ErrorObserver | CompletionObserver | undefined): Subscription', ga følgende feil. Argument av typen '(event: NavigationEnd) => void' kan ikke tilordnes parameter av typen 'NextObserver | ErrorObserver | CompletionObserver | undefined'. Egenskapen 'complete' mangler i typen '(event: NavigationEnd) => void', men kreves i typen 'CompletionObserver'. Overbelastning 2 av 5, '(next?: ((value: Event) => void) | undefined, error?: ((error: any) => void) | undefined, complete?: (() => void) | undefined): Subscription', ga følgende feil. Argument av typen '(event: NavigationEnd) => void' kan ikke tildeles en parameter av typen '(value: Event) => void'. Typene for parameterne 'event' og 'value' er inkompatible. Typen 'Event' kan ikke tildeles typen 'NavigationEnd'. Egenskapen 'urlAfterRedirects' mangler i typen 'RouterEvent', men kreves i typen 'NavigationEnd'.

Se konstruktørkode nedenfor med nevnt kodebiter:

export class NavigationService implements OnDestroy {
  private readonly routeChange: Subscription | undefined;
  private previousUrl: string | undefined;
  private ignoredRoutes = ['/signup', '/login', '/reset'];

  constructor(private router: Router) {
    this.routeChange = router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        if (!this.ignoredRoutes.includes(event.url)) {
          this.previousUrl = event.url;
        }
      });
  }

  ngOnDestroy(): void {
    if (this.routeChange) {
      this.routeChange.unsubscribe();
    }
  }

  public routeToPreviousContent(): void {
    //route home if undefined
    const targetUrl = this.previousUrl ? this.previousUrl : '';
    this.router.navigate([targetUrl]).then();
  }
}

Er TS2769 gyldig i dette tilfellet i det hele tatt? Jeg antar at rxjs filter-pipen med event instanceof NavigationEnd rett og slett ikke blir gjenkjent?!

Svar #1

Funksjonen som sendes til filter er ikke en typevakt, men du kan indikere typen slik:

constructor(private router: Router) {
  this.routeChange = router.events
    .pipe(
      filter((event): event is NavigationEnd => event instanceof NavigationEnd)
    )
    .subscribe(event => {
      // "event" here is now of type "NavigationEnd"
    });
}

Relaterte artikler