NGRX reducer未抛出非法属性赋值错误如何开启编译校验？

AI 小北

2026-9-30

问题原因

该现象是TypeScript本身的校验规则导致的：多余属性校验（Excess Property Checking）仅对直接赋值给指定类型变量的对象字面量触发。on方法的回调函数默认不会强制要求返回值和State类型严格对齐，在你没有显式标注返回类型时，TS只会做结构兼容性检查，只要返回值包含State的所有必填属性就会通过校验，不会主动拦截多余的未知属性。

解决方案

你可以通过以下任意一种方式收紧类型校验，触发多余属性报错：

方案1：给on的回调函数显式标注返回类型
直接给reducer回调声明返回值为你的State接口，即可触发对象字面量的多余属性校验：

const reducer = createReducer(
  initialState,
  // 显式标注返回类型为 IExample
  on(add, (state, { payload }): IExample => ({ 
    ...state,
    other: '??????' // 此处会直接抛出多余属性的编译错误
  })),
);

方案2：给createReducer显式传入State泛型参数
手动指定createReducer的泛型约束，收紧全局的reducer返回值校验规则：

// 显式指定泛型为 IExample
const reducer = createReducer<IExample>(
  initialState,
  on(add, (state, { payload }) => ({ 
    ...state,
    other: '??????' // 此处同样会触发编译错误
  })),
);

方案3：检查tsconfig.json的校验配置
确认你的TypeScript配置没有关闭多余属性校验，建议开启全量严格模式保证校验覆盖：
```
{
  "compilerOptions": {
    "strict": true,
    "suppressExcessPropertyErrors": false
  }
}
```