@ngrx/store从v10升级v11/v12出现类型不兼容错误如何解决

NgRx v11 对类型系统做了大幅收紧，单独在外部文件定义的on处理器，TypeScript 无法自动从主createReducer的泛型继承AppState类型，会默认将state推断为unknown，传入createReducer时就会触发类型不匹配报错。NgRx v10 版本类型检查宽松，因此相同代码可以正常运行。

方案1：给外部on函数显式指定State泛型（最推荐） #

修改form.reducer.ts中的代码，给on方法显式传入AppState作为第一个泛型参数即可：

import { on } from '@ngrx/store';
import * as MyAction from '../actions';
import { AppState } from '../state';

// 给on方法加上<AppState>泛型
export const onEnableForm = on<AppState>(MyAction.EnableForm, (state) => {
    return {
        ...state,
        form: {
            ...state.form,
            disabled: false
        }
    };
});
export const onDisableForm = on<AppState>(MyAction.DisableForm, (state) => {
    return {
        ...state,
        form: {
            ...state.form,
            disabled: true
        }
    };
});

指定泛型后TypeScript就能正确识别state类型为AppState，无需修改其余代码即可解决报错。

方案2：将on逻辑移入主reducer #

如果抽离的on逻辑不多，可以直接把form相关的处理逻辑放到主createReducer调用内，TypeScript会自动从createReducer<AppState>继承类型，不需要额外加泛型：

// 主reducer代码调整
export function storeReducer(state: AppState = initialState, action: Action): AppState {
    return createReducer<AppState>(
        state,
        on(MyAction.InitializeState, MyAction.ResetState, () => initialState),
        on(MyAction.DestroyState, () => undefined),
        // 直接写在内部
        on(MyAction.EnableForm, (state) => ({
            ...state,
            form: { ...state.form, disabled: false }
        })),
        on(MyAction.DisableForm, (state) => ({
            ...state,
            form: { ...state.form, disabled: true }
        }))
    )(state, action);
}

额外注意项 #

你当前代码中on(MyAction.DestroyState, () => undefined)返回了undefined，如果你的AppState类型没有声明为AppState | undefined，后续可能会触发额外的类型报错，建议根据业务逻辑调整返回值，或者修改AppState的类型定义兼容undefined场景。

内容的提问来源于stack exchange，提问作者Lukho Mdingi