Angular 18+NgRx Signals嵌套对象引发TS2742类型注解错误求助

问题原因 #

当Signal Store包含嵌套对象时，TypeScript无法正确推断返回类型——它依赖@ngrx/signals内部未导出的DeepSignal类型进行推断，导致类型不可移植，触发TS2742错误。

解决方案 #

方案1：显式标注Signal Store的返回类型 #

从@ngrx/signals导入SignalStore类型，显式指定其状态结构，避免TypeScript依赖内部未导出类型进行推断：

import { signalStore, withState, SignalStore } from '@ngrx/signals';
import { SidebarSettingsState} from '../types';

const initialState: SidebarSettingsState = {
  theme: 'sidebar-dark',
  collapsed: false,
  logo: {
    theme: 'bg-blue',
  },
};

// 显式标注Store类型，指定state为SidebarSettingsState
export const SidebarSettingsStore: SignalStore<{ state: SidebarSettingsState }> = signalStore(
  withState<SidebarSettingsState>(initialState)
);

方案2：升级@ngrx/signals到兼容Angular 18的版本 #

Angular 18与@ngrx/signals 17.x存在版本兼容性差异，嵌套对象的类型推断问题在@ngrx/signals 18.x中已修复。执行升级命令：

npm install @ngrx/signals@^18.0.0
# 或使用yarn
yarn add @ngrx/signals@^18.0.0

方案3：明确嵌套对象的类型定义 #

为状态中的嵌套对象定义独立接口，帮助TypeScript更清晰地推断类型：

在../types.ts中：

export interface LogoConfig {
  theme: string;
}

export interface SidebarSettingsState {
  theme: string;
  collapsed: boolean;
  logo: LogoConfig;
}

保持Store文件原有代码即可，明确的嵌套类型会让TypeScript正确推断Store的返回类型。

验证 #

应用上述方案后，TypeScript错误会消失，模板可正常访问Store中的嵌套数据（如store.state().logo.theme）。

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