如何让NgRx Signal Store支持索引签名？类型报错求解

你遇到的问题核心在于：NgRx Signal Store会自动将初始状态的每个属性拆解为独立的信号，但索引签名类型的状态无法被正确识别为可拆解的属性，导致类型检查报错。下面是几个可行的解决思路：

方法1：使用select方法访问动态键 #

Signal Store的select方法支持传入选择器函数，通过这种方式可以正确处理索引签名的类型问题：

修改组件代码：

@Component({
  selector: 'app-root',
  template: `<p>{{ abcValue() }}</p>`,
})
export class AppComponent {
  myStore = inject(MyStore);
  abcValue = this.myStore.select(state => state['abc']);
}

或者直接在模板中调用：

<p>{{ myStore.select(state => state['abc'])() }}</p>

方法2：将键值对包装为单个状态属性 #

把索引签名对象包装成状态里的一个独立属性，让Signal Store将其作为整体信号暴露，这样就能正常使用索引访问：

修改状态定义与初始状态：

export type MyState = {
  keyValues: { [key: string]: string };
};

const initialState: MyState = { 
  keyValues: { abc: 'test' } 
};

export const MyStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
);

组件中访问方式：

<p>{{ myStore.keyValues()['abc'] }}</p>

方法3：改用NgRx Entities（适用于实体集合场景） #

如果你的数据是同类型的实体集合（比如以ID为键的用户、商品数据），NgRx Entities是更规范的解决方案。它提供了专门的工具管理键值对集合，包含CRUD操作、预定义选择器等，能更好地和Signal Store集成，同时保障类型安全：

示例代码：

import { withEntities } from '@ngrx/signals';

export interface Item {
  id: string;
  value: string;
}

export const MyStore = signalStore(
  { providedIn: 'root' },
  withEntities<Item>(),
);

之后可以通过addEntity、selectEntity等方法管理和访问数据，无需手动处理索引签名的类型问题。

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