如何为NGXS的Store快照返回值及状态对象添加类型定义？

要让store.snapshot()返回值获得完整的类型提示，只需两步就能实现：

1. 定义全局根状态类型 #

先把所有状态slice的类型整合为一个全局的根状态接口，确保每个slice的类型和对应状态类的模型一致：

// 单个状态slice的类型定义
interface AuthStateModel {
  isLoggedIn: boolean;
  user: { name: string } | null;
}

interface TodoStateModel {
  items: string[];
  loading: boolean;
}

// 全局根状态，属性名要和你在@State装饰器里定义的name一致
interface AppState {
  auth: AuthStateModel;
  todos: TodoStateModel;
}

2. 扩充NGXS Store的类型 #

用TypeScript的模块扩充特性，覆盖Store接口的snapshot方法返回类型：

// 在项目的类型定义文件（比如typings.d.ts）或者组件/服务文件中添加
declare module '@ngxs/store' {
  interface Store {
    snapshot(): AppState;
  }
}

使用效果 #

现在调用this.store.snapshot()时，TypeScript会自动推断返回的是AppState类型，访问this.store.snapshot().auth或this.store.snapshot().todos都会得到对应的类型提示，包括属性和属性类型。

注意：要确保每个状态类的@State装饰器中定义的name和AppState中的属性名完全匹配，比如AuthState的@State({ name: 'auth' })要对应AppState里的auth属性。

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