How could I get the type of the state derived from a signalStoreFeature?

[Pizzicato]

I have a feature, myFeature, and I'd like to know how to get the type of a state in which that feature is applied:

const myState = signalStore(
  myFeature(),
  ...
)

That feature is going to be used in different stores, with other methods, features, computed, etc added. I need to get the base state type that that feature generates to use it in some wrapper generic components that just care about that feature.

[rainerhahnekamp]

Ay, happy to help but can you give me a more detailed example please?

[Pizzicato]

Hey Rainer! Thanks for answering!
Yep, I'll give you some context: I'm creating a reusable CRUD sections system, because in the project I'm working on there are many sections which behave exactly the same, with some variable areas and extended behavior. For example, regarding UI the listing table is exactly the same only changing the columns to show, and each columns contents, and regarding UX (State), they all have a base behaviour layer, and some stuff that can be added, for example, for the users edition, you can also change the user password, besides the base CRUD operations.

There are two parts to solve: the state and the UI. For the UI I'm using wrapper generic components that use templates insertion for the variable parts, and for the state, I use ngrx with a feature (withCrud) that takes care of the crud operations.

In the routing file I provide a token CrudStore with the specific store for that section, e.g.:

// routes file
{
  path: 'users',
  data: { permit: 'users-section-access' },
  providers: [{ provide: CrudStore, useExisting: UsersStore }],
  loadChildren: () => import('./features/users/users.routes'),
},

// users store file
const UsersStore = signalStore(
  { providedIn: 'root' },
  withCrud<User, UsersParams>(someConfigParams),
  // Here specific methods, properties or whatever specific to the users section state, like change password method
}

The wrapper components inject the generic CrudStore token and take care of all the common functionality, while I can inject the specific store for the extended functionality in children section specific components. This works beautifully and allows to remove all code repetition that I usually made for these kind of situations.

The thing is that in the wrapper components I want to have access to the CrudStore type, which would be the type of a ngrx store that only has the withCrud feature, that is, the common crud properties and methods. Currently I'm using any as CrudStoreType, but I'd like to be able to use the proper typing. Can you help?

I have started doing some typing myself, but I don't want to reinvent the wheel if this is already available in ngrx/signals included type utilities. Also, I'm not the best in TS 😅

I hope this wasn't too much context..

BTW I'm a big fan of your work and contributions. Thanks a lot for what you do.

[rainerhahnekamp]

I understand. Did you think of writing an explicit type? I have here a working example. Just to be sure. Let me know if this is what you had in mind: https://stackblitz.com/edit/github-wffkrhhx?file=src%2Fmain.ts

import { Component, inject } from '@angular/core';

import { signalStore, signalStoreFeature, withMethods } from '@ngrx/signals';
import { withEntities } from '@ngrx/signals/entities';

abstract class CrudStore<Entity> {
  abstract create(entity: Entity): void;
  abstract update(entity: Entity): void;
  abstract remove(entity: Entity): void;
  abstract load(): void;
}

type User = {
  id: number;
  name: string;
};

function withCrudStore<Entity>() {
  return signalStoreFeature(
    withEntities<Entity>(),
    withMethods(() => ({
      create: (entity: Entity) => void true,
      update: (entity: Entity) => void true,
      remove: (entity: Entity) => void true,
      load: () => void true,
    }))
  );
}

const UserStore = signalStore({ providedIn: 'root' }, withCrudStore<User>());

// Ensures that the Store implements the CrudStore type
export function provideCrudStore<Entity>(Store: new () => CrudStore<Entity>) {
  return {
    provide: CrudStore<Entity>,
    useExisting: Store,
  };
}

@Component({
  selector: 'app-root',
  template: ``,
  providers: [provideCrudStore(UserStore)],
})
export class App {
  readonly userStore: CrudStore<User> = inject(CrudStore);
}

BTW I'm a big fan of your work and contributions. Thanks a lot for what you do.

Thanks 👍😃

[Pizzicato]

Hi, thanks!
I didn't think of writing a explicit type, but it would be quite monstrous and hard to maintain as the withCrud feature includes quite a bit of methods and properties. I have created these type utils to make the conversion and they seem to be working but I'm not sure how hacky they are, what do you think?

type Signalify<T> = { [K in keyof T]: Signal<T[K]> };
type ToState<T extends SignalStoreFeatureResult> = Signalify<T['state']> & T['props'] & T['methods'];

type CrudFeatureProps = ReturnType<typeof withCrud> extends SignalStoreFeature<any, infer O> ? O : never;
export type CrudStoreT = ToState<CrudFeatureProps>;

[rainerhahnekamp]

Of course, you can solve it with derived typings as well. However, you should also consider code complexity and whether everyone on your team will be able to maintain it. In terms of maintainability, using an explicit type is certainly easier, though it offers less flexibility.

It is not "hacky". I'd say advanced TypeScript

[Pizzicato]

All right! Thanks a lot Rainer, really helpful as always!

[rainerhahnekamp]

You're welcome. If this matter has been solved for you, please also mark it as "answered". All the best!