NgRx 15中Feature类型导入失败问题求助

核心原因 #

你直接导入了NgRx内部私有文件@ngrx/store/src/feature_creator中的Feature类型，而该类型在NgRx 15的内部声明中是本地未导出的（仅用declare type定义，没有export关键字），因此无法被外部导入使用。同时，直接依赖NgRx的内部文件属于不安全的做法，这些私有API随时可能变更。

解决方案 #

1. 替换内部API导入为公共API #

首先，把所有内部路径的导入替换为NgRx的公共导出：

// 替换这两行内部导入
// import { Feature } from '@ngrx/store/src/feature_creator';
// import { ActionCreator, TypedAction } from '@ngrx/store/src/models';

// 使用公共API导入
import { ActionCreator, TypedAction, FeatureConfig, BaseSelectors } from '@ngrx/store';

2. 处理Feature类型的两种方式 #

方式一：通过ReturnType推导类型（推荐）

如果你是为createFeature的返回值定义类型，不需要手动声明Feature，直接用ReturnType推导即可：

import { createFeature, createReducer } from '@ngrx/store';

// 示例reducer
const initialState = { count: 0 };
const counterReducer = createReducer(initialState);

// 创建feature
const counterFeature = createFeature({
  name: 'counter',
  reducer: counterReducer,
});

// 自动推导feature类型
type CounterFeature = ReturnType<typeof createFeature>;

方式二：手动声明Feature类型

如果你需要复用类似KioskStoreFeature的自定义类型，可以参考NgRx内部的定义，自己声明Feature类型：

import { FeatureConfig, BaseSelectors } from '@ngrx/store';

// 手动声明Feature类型
export type Feature<
  AppState extends Record<string, any>,
  FeatureName extends keyof AppState & string,
  FeatureState extends AppState[FeatureName]
> = FeatureConfig<FeatureName, FeatureState> & BaseSelectors<AppState, FeatureName, FeatureState>;

// 你的自定义类型可以继续使用
export type KioskStoreFeature<TFeatureState, TKioskFeatureName extends keyof Record<string, TFeatureState> & string> = Feature<
  Record<string, TFeatureState>,
  TKioskFeatureName,
  TFeatureState
>;

3. 确保依赖一致性 #

你的所有NgRx依赖版本均为15.4.0，版本一致，无需调整。

问题背景：
将NgRx升级至15版本（@ngrx/store 15.4.0）后，编译时出现Feature类型无法导出的错误。代码中尝试从@ngrx/store/src/feature_creator导入Feature，但控制台提示该模块的Feature为本地声明未导出。

依赖配置：

{
  "@angular/animations": "^15.2.10",
  "@angular/cdk": "^15.2.9",
  "@angular/common": "^15.2.10",
  "@angular/compiler": "^15.2.10",
  "@angular/core": "^15.2.10",
  "@angular/forms": "^15.2.10",
  "@angular/material": "^15.2.9",
  "@angular/platform-browser": "^15.2.10",
  "@angular/platform-browser-dynamic": "^15.2.10",
  "@angular/router": "^15.2.10",
  "@ngrx/effects": "^15.4.0",
  "@ngrx/entity": "^15.4.0",
  "@ngrx/schematics": "^15.4.0",
  "@ngrx/store": "^15.4.0",
  "@ngrx/store-devtools": "^15.4.0",
  "@types/yandex-maps": "^2.1.20",
  "angularx-qrcode": "^15.0.1",
  "core-js": "^3.20.3",
  "moment": "^2.29.1",
  "rxjs": "^7.5.2",
  "tslib": "^2.3.1",
  "zone.js": "~0.11.4"
}

报错代码片段：

import { Feature } from '@ngrx/store/src/feature_creator';
import { ActionCreator, TypedAction } from '@ngrx/store/src/models';

export type Action = ActionCreator<string, () => TypedAction<string>>;
export type ActionSuccess<T> = ActionCreator<string, (props: T) => T & TypedAction<string>>;
export type ActionError = ActionCreator<string, (props: { error: unknown }) => { error: unknown } & TypedAction<string>>;
export type ActionWithProps<T> = ActionCreator<string, (props: T) => T & TypedAction<string>>;

export type KioskStoreFeature<TFeatureState, TKioskFeatureName extends keyof Record<string, TFeatureState> & string> = Feature<
  Record<string, TFeatureState>,
  TKioskFeatureName,
  TFeatureState
>;

控制台错误信息：

Error: src/main/client/kiosk/core/store/types/index.ts:1:10 - error TS2459: Module "@ngrx/store/src/feature_creator" declares 'Feature' locally, but it is not exported.

1 import { Feature } from '@ngrx/store/src/feature_creator';
           ~~~~~~~

  node_modules/@ngrx/store/src/feature_creator.d.ts:7:14
    7 declare type Feature<AppState extends Record<string, any>, FeatureName extends keyof AppState & string, FeatureState extends AppState[FeatureName]> = FeatureConfig<FeatureName, FeatureState> & BaseSelectors<AppState, FeatureName, FeatureState>;
                   ~~~~~~~
    'Feature' is declared here.

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