How to get the right type for a callback that acts on a signal store's custom-feature data?

[PhilippMDoerner]

Simplified Scenario

Say you have a signal store that has 2 custom features registered, both of which add state and methods with generic names.

// example.store.ts
export type ExampleStoreType = InstanceType<typeof ExampleStoreType>;

export const ExampleStore = signalStore(
  { providedIn: 'root' },
  withExample('example'),
  withExample('other'),
);

// withExample.ts
import {
  signalStore,
  signalStoreFeature,
  SignalStoreFeature,
  withMethods,
  withState,
} from '@ngrx/signals';

export type ExampleState<Prop extends string> = {
  [K in Prop as `${K}Field`]: string;
};

export type ExampleMethods<Prop extends string> = {
  [K in Prop as `do${K}`]: () => void;
};

export type EmptyFeature = {
  state: {};
  signals: {};
  methods: {};
  computed: {};
};

export type FilledFeature<Prop extends string> = {
  state: ExampleState<Prop>;
  computed: {};
  methods: ExampleMethods<Prop>;
};

export function withExample<Prop extends string>(
  name: Prop,
): SignalStoreFeature<EmptyFeature, FilledFeature<Prop>> {
  return signalStoreFeature(
    withState<ExampleState<Prop>>({
      [`${name}Field`]: 'foo',
    } as ExampleState<Prop>),
    withMethods((store) => {
      return {
        [`do${name}`]: () => {
          // Some logic
        },
      } as ExampleMethods<Prop>;
    }),
  ) as SignalStoreFeature<EmptyFeature, FilledFeature<Prop>>;
}

The store this generates has these fields:

{
  // from withExample('example')
  exampleField: Signal<string>,
  doexample: () => void,
  // from withExample('other')
  otherField: Signal<string>,
  doother: () => void
}

The Problem

Now say this store has a special case where if doexample() successfully runs, you also want to update otherField.
So you allow adding an optional callback that can be executed when that happens.

// withExample.ts
export function withExample<Store, Prop extends string>(
  name: Prop,
  onSuccess?: (store: Store) => void
): SignalStoreFeature<EmptyFeature, FilledFeature<Prop>> {
...

But how do you get the type of ExampleStore within the definition of ExampleStore ?

// example.store.ts
export type ExampleStoreType = InstanceType<typeof ExampleStoreType>;

export const ExampleStore = signalStore(
  { providedIn: 'root' },
  withExample(('example', (store: ???) => ),
  withExample('other'),
);

I can't use (store: ExampleStoreType) as that would lead to a recursion.

'store' is referenced directly or indirectly in its own type annotation.ts(2502)

So how else can I get a type for the store param that contains all the fields of the store?

In practice I'm encountering this with my own custom signal store features that execute HTTP requests, store the result in a state-field and keep track of the request state (failed, loading, success, init). There you have scenarios where one request may delete an entry from a list and then you want to update that list in your store to remove said entry.

[rainerhahnekamp]

@PhilippMDoerner, thanks for writing it that detailed. Would it be possible to set up your example on https://stackblitz.com/github/ngrx/signal-store-starter? It would make it much easier.

[PhilippMDoerner]

https://stackblitz.com/edit/github-kvtghf?file=src%2Fexample.store.ts

I think that should be it. I couldn't see any button to compile it, so not entirely sure if that'll show the error.

The compiler errors should be in withExample.ts:

Argument of type '{ [K in keyof (StateSignals<ExampleState<Prop>> & WritableStateSource<{ [K in keyof ExampleState<Prop>]: ExampleState<Prop>[K]; }>)]: (StateSignals<...> & WritableStateSource<...>)[K]; }' is not assignable to parameter of type 'Store'.
  'Store' could be instantiated with an arbitrary type which could be unrelated to '{ [K in keyof (StateSignals<ExampleState<Prop>> & WritableStateSource<{ [K in keyof ExampleState<Prop>]: ExampleState<Prop>[K]; }>)]: (StateSignals<...> & WritableStateSource<...>)[K]; }'.ts(2345)

and in example.store.ts

'store' is referenced directly or indirectly in its own type annotation.ts(2502)

[rainerhahnekamp]

@PhilippMDoerner, you do it the other way around. You define the callback as private method, and the extension uses it then:

https://stackblitz.com/edit/github-kvtghf-9o34rq?file=src%2FwithExample.ts

export const ExampleStore = signalStore(
  { providedIn: 'root' },
  withMethods((store) => ({
    _exampleCb() {
      // code for callback here...
    },
  })),
  withExample('example'),
  withExample('other')
);

export function withExample<Prop extends string>(
  name: Prop
): SignalStoreFeature<EmptyFeature, FilledFeature<Prop>> {
  return signalStoreFeature(
    { methods: type<{ _exampleCb: () => void }>() },
    withState<ExampleState<Prop>>({
      [`${name}Field`]: 'foo',
    } as ExampleState<Prop>),
    withMethods((store) => {
      return {
        [`do${name}`]: () => {
          // Some logic
          store._exampleCb();
        },
      } as ExampleMethods<Prop>;
    })
  ) as SignalStoreFeature<EmptyFeature, FilledFeature<Prop>>;
}

Btw. don't create your ownEmptyFeature but used EmptyFeatureResult from the SignalStore.

[PhilippMDoerner]

Thanks for the hint about EmptyFeatureResult, I was not aware that existed and thought you'd need to provide your own (like in this article for withCallState)!

Follow up question though:
If I'm understanding this correctly, then every feature-instance of withExample would be relying on the same _exampleCb method on the ExampleStore instance.
But generally you'd want a different method for each feature-instance, so that only when doexample fires the extra state change occurs.
How would I make it so that the name of exampleCb is not static but generated the same as all the other states/methods of this feature?

I assume the method type we add changes slightly to { methods: type<{ [K in Prop as on${K}Success]: () => void }>() } but I'm struggling with getting the method call out of there again. Ideally the method would also be optional so that if a store implements it, then it gets called.

[rainerhahnekamp]

If you have multiple instances of an extension, it starts to become interesting.

I would still have on _exampleCb but withExample would then get some kind id as parameter. In your case, I'd already the name parameter.

export const ExampleStore = signalStore(
  { providedIn: 'root' },
  withMethods((store) => ({
    _exampleCb(id: string) {
      // code for callback here...
    },
  })),
  withExample('example'),
  withExample('other')
);

export function withExample<Prop extends string>(
  name: Prop
): SignalStoreFeature<EmptyFeature, FilledFeature<Prop>> {
  return signalStoreFeature(
    { methods: type<{ _exampleCb: () => void }>() },
    withState<ExampleState<Prop>>({
      [`${name}Field`]: 'foo',
    } as ExampleState<Prop>),
    withMethods((store) => {
      return {
        [`do${name}`]: () => {
          // Some logic
          store._exampleCb(name);
        },
      } as ExampleMethods<Prop>;
    })
  ) as SignalStoreFeature<EmptyFeature, FilledFeature<Prop>>;
}

I am aware that the DX is not the best. But it works and we have to say you have there a high advanced use case for the feature. If we see that more and more developers are struggling here, signalStoreFeature might get an appropriate extension.

[PhilippMDoerner]

I mean, chances are I might be wanting to squeeze something into a custom signal store feature that I shouldn't, not entirely sure yet 😄

I also did some experimenting and found a second option (not sure if I like it) via mostly circumventing the type system.

export function withExample<Prop extends string>(
  name: Prop,
): SignalStoreFeature<EmptyFeature, FilledFeature<Prop>> {
  return signalStoreFeature(
    withState<ExampleState<Prop>>({
      [`${name}Field`]: 'foo',
    } as ExampleState<Prop>),
    withMethods((store) => {
      return {
        [`do${name}`]: () => {
          // Some logic
          const successFunction = (store as any)[`_on${name}Success`];
          if (successFunction) successFunction(store);
        },
      } as ExampleMethods<Prop>;
    }),
  ) as SignalStoreFeature<EmptyFeature, FilledFeature<Prop>>;
}

Meaning the overall options for syntax on the store-side are thus either:

type FeatureInstances = 'example' | 'other'

export const ExampleStore = signalStore(
  { providedIn: 'root' },
  withMethods((store) => ({
    _exampleCb(id: FeatureInstances) { // on the withExample side id will be passed as string
        switch(id){
          case('example'){
            patchState(store, { otherField: 'bar' });
            break;
          }
        }
    },
  })),
  withExample('example'),
  withExample('other')
);

and

export const ExampleStore = signalStore(
  { providedIn: 'root' },
  withMethods((store) => {
    return {
      _onexampleSuccess: () => {
        patchState(store, { otherField: 'bar' });
      },
    };
  }),
  withExample('example'),
  withExample('other'),
);

From what I can tell from my limited know-how here there's not that large a difference between the two. At least in terms of intellisense, neither gave me suggestions in the withMethods hook for _exampleCb or _onXSuccess.

[rainerhahnekamp]

Well, you know how it is. As soon as you do as any you are opting out of TypeScript's type safety.