Angular+NgRx Store类型不匹配报错TS2345问题求助

这种类型不匹配的问题在NgRx 5.x搭配TypeScript 2.x的项目里挺常见的，核心原因就是你注册Store根reducer时用的key，和你订阅时选择状态用的key不一致。咱们一步步来解决：

1. 先确认根Store的注册key #

从你给出的app.module.ts代码片段来看，你应该是这样注册根Store的：

StoreModule.forRoot({ appState: appReducer })

这里的appState就是根状态对象里对应appReducer的key，而你在订阅时用了"appStateData"，TypeScript自然会报错——它找不到这个key对应的状态类型。

2. 修正订阅时的选择key #

把你订阅代码里的"appStateData"改成和注册时一致的"appState"就行：

// 错误写法
this.store.select('appStateData').subscribe(...)

// 正确写法
this.store.select('appState').subscribe(data => {
  // 处理你的状态数据
});

3. 进阶：用类型化选择器彻底避免这类错误 #

硬编码字符串很容易写错，推荐你创建类型化的选择器，既能享受TypeScript的类型检查，也更易维护：

第一步：定义根状态接口 #

在你的store目录下创建app.state.ts：

// 假设你的appReducer返回的状态类型是AppStateData，根据实际情况替换
import { AppStateData } from './app.state-data';

export interface AppRootState {
  // 这里的key必须和StoreModule.forRoot里的key完全一致
  appState: AppStateData;
}

第二步：创建类型化选择器 #

创建app.selectors.ts：

import { createFeatureSelector } from '@ngrx/store';
import { AppRootState } from './app.state';
import { AppStateData } from './app.state-data';

// 用createFeatureSelector选择根状态里的appState节点
export const selectAppState = createFeatureSelector<AppRootState, AppStateData>('appState');

第三步：在组件里使用选择器 #

import { selectAppState } from './store/app.selectors';

// ...

// 现在订阅时用选择器，TypeScript会自动校验类型
this.store.select(selectAppState).subscribe(appData => {
  // 这里的appData会自动推导为AppStateData类型
});

额外检查点 #

• 确保你的appReducer返回的状态类型和AppRootState里定义的appState类型完全匹配，比如reducer的初始状态和返回值都要符合AppStateData类型。
• NgRx 5.x的createFeatureSelector用法和后续版本基本一致，注意不要导错包，要从@ngrx/store导入。

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