升级NodeJS后Ngrx代码编译报错：类型不兼容问题求助

环境信息 #

Angular 13、Ngrx 13、NodeJS 16，切换Node版本并更新依赖后出现类型错误。

问题代码 #

@Effect()
loadMyWorkitemList$ = this.dataPersistence.fetch(WorkflowActionTypes.LoadMyWorkitemList, {
  run: (action: LoadMyWorkitemList, state: WorkflowPartialState) => {
    return this.workitemsService.mylist().pipe(
      map(result => {
        return new fromWorkflowActions.MyWorkitemListLoaded(result.payload);
      })
    );
  },

  onError: (action: LoadMyWorkitemList, error: HttpErrorResponse) => {
    return new fromWorkflowActions.MyWorkitemListLoadError(error);
  }
});

报错信息（翻译后） #

类型 '(action: LoadMyWorkitemList, state: WorkflowPartialState) => Observable<MyWorkitemListLoaded>' 无法赋值给类型 '(a: LoadMyWorkitemList, slices_0: WorkflowPartialState) => void | Action | Observable<Action>'。
  类型 'Observable<MyWorkitemListLoaded>' 无法赋值给类型 'void | Action | Observable<Action>'。
    类型 'Observable<MyWorkitemListLoaded>' 缺少类型 'Observable<Action>' 中的以下属性: _isScalar, _trySubscribe, _subscribets(2322)
data-persistence.d.ts(26, 5): 预期类型来自属性 'run'，该属性在类型 'FetchOpts<[WorkflowPartialState], LoadMyWorkitemList>' 上声明

解决方法 #

1. 确保Action类正确实现Ngrx Action接口 #

检查MyWorkitemListLoaded和MyWorkitemListLoadError是否符合Ngrx Action规范：

• 必须包含只读的type属性
• 显式实现Action接口

示例代码：

import { Action } from '@ngrx/store';

export class MyWorkitemListLoaded implements Action {
  readonly type = WorkflowActionTypes.MyWorkitemListLoaded;
  constructor(public payload: YourPayloadType) {}
}

export class MyWorkitemListLoadError implements Action {
  readonly type = WorkflowActionTypes.MyWorkitemListLoadError;
  constructor(public error: HttpErrorResponse) {}
}

如果使用Ngrx 13推荐的函数式Action，写法如下：

import { createAction, props } from '@ngrx/store';

export const myWorkitemListLoaded = createAction(
  WorkflowActionTypes.MyWorkitemListLoaded,
  props<{ payload: YourPayloadType }>()
);

export const myWorkitemListLoadError = createAction(
  WorkflowActionTypes.MyWorkitemListLoadError,
  props<{ error: HttpErrorResponse }>()
);

2. 显式指定Observable泛型类型 #

在run方法中明确返回类型为Observable<Action>，帮助TypeScript完成类型推导：

run: (action: LoadMyWorkitemList, state: WorkflowPartialState): Observable<Action> => {
  return this.workitemsService.mylist().pipe(
    map(result => {
      return new fromWorkflowActions.MyWorkitemListLoaded(result.payload);
    })
  );
},

3. 检查依赖版本一致性 #

• 确保@ngrx/data、@ngrx/store与rxjs版本匹配：Ngrx 13对应RxJS 7.x，Angular 13也依赖RxJS 7
• 执行npm ls rxjs查看项目中RxJS版本，避免多版本共存导致类型冲突

4. 改用Ngrx 13推荐的Effect写法（可选） #

Ngrx 13官方推荐使用createEffect函数替代@Effect()装饰器，结合DataPersistence的写法示例：

import { createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';

// ...

loadMyWorkitemList$ = createEffect(() =>
  this.dataPersistence.fetch(WorkflowActionTypes.LoadMyWorkitemList, {
    run: (action: LoadMyWorkitemList, state: WorkflowPartialState) => {
      return this.workitemsService.mylist().pipe(
        map(result => myWorkitemListLoaded({ payload: result.payload }))
      );
    },
    onError: (action: LoadMyWorkitemList, error: HttpErrorResponse) => {
      return of(myWorkitemListLoadError({ error }));
    }
  })
);

注意：onError方法需要返回Observable<Action>，因此要用of()包裹Action实例。

内容的提问来源于stack exchange，提问作者Benedict Chng