使用NGXS select时如何实现类型安全？

我在Angular应用中使用NGXS进行状态管理，每个模块对应一个store，简洁实用。但目前遇到两个问题：

1. 执行select/selectSnapshot时必须手动指定属性类型，一旦store状态结构变更但代码未同步更新，错误要到页面运行时才会暴露，无法提前发现；
2. 无法通过Ctrl+点击所选属性直接跳转查看模型定义。

现有代码示例：

// 手动指定boolean，若改成其他类型，编译不报错，运行时才会出问题
this.loading = this.store.select<boolean>(state => state.organization.isLoading);

// 快照选择同理
this.store.selectSnapshot<Organization>(state => state.organization.selectedOrganization);

解决方案：利用NGXS的自动类型推断+全局状态接口 #

核心思路是让TypeScript自动推断状态类型，而非手动指定泛型，前提是正确定义全局状态结构和每个Store的状态模型。

1. 定义每个Store的状态模型接口

为每个模块的Store明确状态结构，比如组织模块：

// organization.state.ts
// 先定义业务模型
export interface Organization {
  id: string;
  name: string;
  // 其他业务属性
}

// 定义该Store的状态模型
export interface OrganizationStateModel {
  isLoading: boolean;
  selectedOrganization: Organization | null;
}

// 关联状态模型到Store
@State<OrganizationStateModel>({
  name: 'organization', // 这个name要和全局状态中的key一致
  defaults: {
    isLoading: false,
    selectedOrganization: null
  }
})
export class OrganizationState {
  // 状态操作逻辑（actions、mutations等）
}

2. 定义全局根状态接口

把所有模块的Store状态整合到一个根接口中，这样state参数会自动拥有完整的类型提示：

// app.state.ts
import { OrganizationStateModel } from './organization/organization.state';

export interface AppState {
  organization: OrganizationStateModel;
  // 其他模块的状态，比如 user: UserStateModel 等
}

3. 配置Store时绑定根状态类型

在AppModule中导入StoreModule时，通过泛型指定根状态类型：

// app.module.ts
import { StoreModule } from '@ngxs/store';
import { AppState } from './app.state';
import { OrganizationState } from './organization/organization.state';

@NgModule({
  imports: [
    StoreModule.forRoot<AppState>([OrganizationState])
  ]
})
export class AppModule {}

4. 类型安全的选择操作（无需手动指定泛型）

现在你可以直接使用select/selectSnapshot，TypeScript会自动推断返回类型，而且：

• 若store状态结构变更，IDE会立即报错（编译阶段发现）；
• Ctrl+点击属性可以直接跳转到对应的模型定义。

// 普通选择：自动推断为Observable<boolean>
this.loading$ = this.store.select(state => state.organization.isLoading);

// 快照选择：自动推断为Organization | null
const selectedOrg = this.store.selectSnapshot(state => state.organization.selectedOrganization);

5. 进阶：复用类型安全的选择器

如果需要复用状态选择逻辑，使用NGXS的createSelector，同样自动保持类型安全：

// organization.state.ts
import { createSelector } from '@ngxs/store';

export class OrganizationState {
  // 自动推断返回类型为boolean
  static getIsLoading = createSelector(
    OrganizationState,
    (state: OrganizationStateModel) => state.isLoading
  );

  // 自动推断返回类型为Organization | null
  static getSelectedOrganization = createSelector(
    OrganizationState,
    (state: OrganizationStateModel) => state.selectedOrganization
  );
}

使用时直接调用选择器：

this.loading$ = this.store.select(OrganizationState.getIsLoading);
const selectedOrg = this.store.selectSnapshot(OrganizationState.getSelectedOrganization);

关键注意事项 #

• 确保TypeScript配置开启strict: true，这样类型检查会更严格，能提前发现更多潜在问题；
• 不要手动指定select/selectSnapshot的泛型，手动指定会覆盖自动推断，导致类型不安全。

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