typescript - NgRx signal store feature restrict calling store state based on a dynamic key - Stack Overflow

admin管理员组

文章数量:1300135

I'm trying to define a reusable feature store and I want my feature store to assume that the state contains a property that I can dynamically define like this:

import {computed} from '@angular/core';
import {signalStoreFeature, type, withComputed} from '@ngrx/signals';

export const withFeature = <Details>(config: { entityName: string }) =>
  signalStoreFeature(
    {state: {[`${config.entityName}Details`]: type<Details>()}},

    withComputed((store) => ({
      [`${config.entityName}ComputedProp`]: computed(() => store[`${config.entityName}Details`]().detailsProp), // TS error here
    })),
  );

But I get the following typescript error: TS7053: Element implicitly has an any type because expression of type ${string}Details can't be used to index type {}. Any suggestion of how I can fix this? I can do it with a statically defined state property, but I want to have it dynamic

I'm trying to define a reusable feature store and I want my feature store to assume that the state contains a property that I can dynamically define like this:

import {computed} from '@angular/core';
import {signalStoreFeature, type, withComputed} from '@ngrx/signals';

export const withFeature = <Details>(config: { entityName: string }) =>
  signalStoreFeature(
    {state: {[`${config.entityName}Details`]: type<Details>()}},

    withComputed((store) => ({
      [`${config.entityName}ComputedProp`]: computed(() => store[`${config.entityName}Details`]().detailsProp), // TS error here
    })),
  );

But I get the following typescript error: TS7053: Element implicitly has an any type because expression of type ${string}Details can't be used to index type {}. Any suggestion of how I can fix this? I can do it with a statically defined state property, but I want to have it dynamic

• typescript
• ngrx-signal-store

Share Improve this question Follow asked Feb 11 at 15:13 MariusMarius 3,68355 gold badges2727 silver badges3030 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Finally I have found out on how I can partially solve this: the following feature is aware that the calling store will have a state property ending in Details but the calling store is not enforced to provide such a state property. The calling store knows that it will have access to a computed signal ending in ComputedProp.

type FeatureState<Details> = {
  [key: `${string}Details`]: Details | undefined;
}

type FeatureSignals<Entity extends string> = {
  [Key in Entity as `${Key}ComputedProp`]: Signal<string | undefined>;
}

export const withFeature = <Details extends { detailsProp: string }, Entity extends string>(config: {
  entityName: Entity
}) => signalStoreFeature(
  {state: type<FeatureState<Details>>()},

  withComputed((store) => ({
    [`${config.entityName}ComputedProp`]: computed(() => store[`${config.entityName}Details`]()?.detailsProp),
  }) as FeatureSignals<Entity>),
);

I had the same issue. The solution is in the documentaion of ngrx as known TypeScript Issues

This issue arises specifically with custom features that accept input but do not define any generic parameters. To prevent this issue, it is recommended to specify an unused generic for such custom features:

本文标签： typescriptNgRx signal store feature restrict calling store state based on a dynamic keyStack Overflow