对 ngrx 影响的操作类型不匹配

Question

我用这 3 个动作创建了一个动作文件：

export const showLoading = createAction(`[application] Show warning notification`);
export const hideLoading = createAction(`[application] Show error notification`);
export const showHttpResponseError = createAction(`[application] Show success notification`, props<{ error: HttpErrorResponse, nextAction: Action }>());

export type Actions = ReturnType<
typeof showLoading |
typeof hideLoading |
typeof showHttpResponseError
>;

然后我创建了一个这样的效果文件：

@Injectable()
export class ApplicationEffects
{
    constructor(private actions$: Actions, private dialogsService: DialogsService, public notificationsService: NotificationService, private router: Router) { }

    @Effect() public erroHandler$ = this.actions$
        .pipe(
            ofType(ApplicationActions.showHttpResponseError.type),
            switchMap(action => {
                    const emptyAction = { type: 'noop' };
                    const error = HttpErrorHandler.handle(action.error);

                    if (error.redirectTo != null) {
                        this.router.navigate([error.redirectTo]);
                        return of(emptyAction);
                    }

                    if (action.error.status === 400) {
                        this.notificationsService.notifyWarning('AVISO', error.messages);
                    }
                    else {
                        this.dialogsService.errorDialog('ERRO', error.messages[0]);
                    }

                    return action.nextAction ? of(action.nextAction) : of(emptyAction);
                },
            ));
}

但出于某种原因，VS Code 智能感知无法识别 switchMap 中的操作类型，它表示其类型为 never:

我错过了什么吗？或者我怎么能强制执行它的类型，因为动作是使用 ngrx 动作创建者创建的，我没有明确的类型。

Answer 1

为了将来参考，如果有人遇到同样的问题，解决方案是键入注入的 actions$ 变量：

private actions$: Actions<ApplicationActions.Actions>

然后智能感知工作，你不需要在 switchMap

中强制执行类型

Answer 2

为了完整性，有多种方式：

1) ofType 运算符的类型

ofType<AddAction>(CounterActions.AddAction)

2) 键入注入的操作，就像您已经回答的那样（从 NgRx 7 开始）

constructor(private actions$: Actions<CounterActions.Actions>

3) createEffect 与 createAction 结合使用（从 NgRx 8 开始）

foo$ = createEffect(() => this.actions$.pipe(
    ofType(addAction),
    ...
);

对 ngrx 影响的操作类型不匹配

Type mismatch on action on ngrx effect

angular

typescript

visual-studio-code

ngrx

ngrx-effects