角度错误 TS2345：“MonoTypeOperatorFunction<Event>”类型的参数无法分配给“OperatorFunction<Event, Event>”类型的参数

Question

尝试解决此代码的问题，

import { Event, Router, RoutesRecognized, ActivationStart, NavigationEnd } from "@angular/router";

...

this._router.events.pipe(
    filter((evt: Event) => evt instanceof RoutesRecognized),
    map((evt: RoutesRecognized) => evt.state.root),
).subscribe((rootRoute: ActivatedRouteSnapshot) => (
    this._resolvedRoutes = this._getResolvedRoutes(rootRoute.children)
));

哪个产生了这个错误，

ERROR: projects/acme/angular-ui/src/lib/services/breadcrumb/breadcrumb.service.ts:213:11 - error TS2345: Argument of type 'MonoTypeOperatorFunction<Event>' is not assignable to parameter of type 'OperatorFunction<Event, Event>'.
  Types of parameters 'source' and 'source' are incompatible.

这里到底有什么问题呢？我猜测该MonoTypeOperatorFunction<Event>函数是过滤器，但我不知道为什么OperatorFunction<Event, Event>映射中会有两个类型变量？我该如何解决这个问题？

Answer 1

使用用户定义的类型保护

我之前尝试过，但这是您想要的格式：

this._router.events.pipe(
    filter((evt: Event): evt is RoutesRecognized => evt instanceof RoutesRecognized),
    map((evt: RoutesRecognized) => evt.state.root),
).subscribe((rootRoute: ActivatedRouteSnapshot) => (
    this._resolvedRoutes = this._getResolvedRoutes(rootRoute.children)
));

现在就我而言，这会产生以下错误：

ERROR: projects/acmeco/angular-ui/src/lib/services/breadcrumb/breadcrumb.service.ts:213:11 - error TS2345: Argument of type 'import("/home/ecarroll/code/js/myworkspace/projects/acmeco/angular-ui/node_modules/rxjs/internal/types").OperatorFunction<import("/home/ecarroll/code/js/myworkspace/node_modules/@angular/router/router").Event, import("/home/ecarroll/code/js/myworkspace/node_modules/@angular/router/router").RoutesRecognized>' is not assignable to parameter of type 'import("/home/ecarroll/code/js/myworkspace/node_modules/rxjs/internal/types").OperatorFunction<import("/home/ecarroll/code/js/myworkspace/node_modules/@angular/router/router").Event, import("/home/ecarroll/code/js/myworkspace/node_modules/@angular/router/router").RoutesRecognized>'.
  Types of parameters 'source' and 'source' are incompatible.
    Type 'import("/home/ecarroll/code/js/myworkspace/node_modules/rxjs/internal/Observable").Observable<import("/home/ecarroll/code/js/myworkspace/node_modules/@angular/router/router").Event>' is not assignable to type 'import("/home/ecarroll/code/js/myworkspace/projects/acmeco/angular-ui/node_modules/rxjs/internal/Observable").Observable<import("/home/ecarroll/code/js/myworkspace/node_modules/@angular/router/router").Event>'.
      The types of 'source.operator.call' are incompatible between these types.
        Type '(subscriber: import("/home/ecarroll/code/js/myworkspace/node_modules/rxjs/internal/Subscriber").Subscriber<any>, source: any) => import("/home/ecarroll/code/js/myworkspace/node_modules/rxjs/internal/types").TeardownLogic' is not assignable to type '(subscriber: import("/home/ecarroll/code/js/myworkspace/projects/acmeco/angular-ui/node_modules/rxjs/internal/Subscriber").Subscriber<any>, source: any) => import("/home/ecarroll/code/js/myworkspace/projects/acmeco/angular-ui/node_modules/rxjs/internal/types").TeardownLogic'.
          Types of parameters 'subscriber' and 'subscriber' are incompatible.
            Type 'import("/home/ecarroll/code/js/myworkspace/projects/acmeco/angular-ui/node_modules/rxjs/internal/Subscriber").Subscriber<any>' is not assignable to type 'import("/home/ecarroll/code/js/myworkspace/node_modules/rxjs/internal/Subscriber").Subscriber<any>'.
              Property 'isStopped' is protected but type 'Subscriber<T>' is not a class derived from 'Subscriber<T>'.

此错误是因为 TypeScript 不健全，并且您有两个名称相似的类型。您可以获得有关与 的冲突的更多信息npm list rxjs。您可以按照此博客文章解决此问题，

通过添加到您的tsconfig.json

this._router.events.pipe(
    filter((evt: Event): evt is RoutesRecognized => evt instanceof RoutesRecognized),
    map((evt: RoutesRecognized) => evt.state.root),
).subscribe((rootRoute: ActivatedRouteSnapshot) => (
    this._resolvedRoutes = this._getResolvedRoutes(rootRoute.children)
));

这将强制您的所有版本使用相同版本的rxjs.