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 获取有关冲突的更多信息。您可以解决这个问题 following this blog post,

通过添加到您的 tsconfig.json

"paths": {
    "rxjs": [
      "node_modules/rxjs"
    ],
    "rxjs/*": [
      "node_modules/rxjs/*"
    ]
}

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

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

1 个答案:

使用用户定义的类型保护