Define a type for a SignalStore CustomFeature

[devkirr]

I would like to know if it’s possible to refer to the type of a particular store custom feature?

type AuthState = { user: User | null };

export const AuthStore = signalStore(
  { providedIn: 'root' },
  withState<AuthState>({ user: null }),
  withFeature()
);

export function withFeature() : Type? {
  withState({ /*...customState*/ })
}


const storeWithFeature: Type? = inject(AuthStore);

With Type? referring the custom feature's state, method, computed, etc. and not the AuthStore.

The use case: I want to provide through an Input of a Directive the CustomFeatureStore for this directive to interact with the provided Store of the component that use this directive in his template.

[PhilippMDoerner]

I'm doing my own experiments regarding that at the moment and mostly orienting myself around https://www.angulararchitects.io/blog/ngrx-signal-store-deep-dive-flexible-and-type-safe-custom-extensions/ .
There they appear to use the SignalStoreFeature as return-type and have one declaration of the function for just defining the return-type and a second declaration of that function for the actual implementation.

For me that still isn't working properly when using it with generic fields, for your usecase it might though, depending on your needs.

[devkirr]

Thanks @PhilippMDoerner, yes I’ve seen this article but honestly felt that it should been a simpler way to achieve that. Maybe not. I will try it.

[rainerhahnekamp]

@devkirr, I am not sure, if I understand you correctly, but the Feature needs to define the requirements for the store, not the other way around.

For example, you could say that the store your feature is used in, needs to have a state property roleName and a method logout.

The way you do that would be:

export function withValidateFeature() {
  return signalStoreFeature(
    {
      state: type<{roleName: string}>(),
      methods: type<{logout: () => void}>()
    },
    withMethods(store => ({
      validate() {
        if (store.roleName() !== 'admin') {
          store.logout();
        }
      }
    }))
  )
}

[devkirr]

Thanks @rainerhahnekamp. Yes I understand the Input needed for the feature. My need is actually more in the way of what type can a store inherit to indicate that it uses a certain custom feature.

[rainerhahnekamp]

Is this better? You only have to apply the satisfies operator once to feature. For Store Instances it is just the type ValidateFeature.

type ValidateFeature = {
  roleName: Signal<string>;
  logout(): void;
};

const withValidateFeature = (() => {
  return signalStoreFeature(
    {
      state: type<{ roleName: string }>(),
      methods: type<{ logout: () => void }>(),
    },
    withMethods((store) => ({
      validate() {
        if (store.roleName() !== 'admin') {
          store.logout();
        }
      },
    }))
  );
}) satisfies () => SignalStoreFeature<
  EmptyFeatureResult & {
    state: { roleName: string };
    methods: { logout: () => void };
  },
  EmptyFeatureResult & {
    methods: {
      validate(): void;
    };
  }
>;

const Store = signalStore(
  withState({ roleName: 'admin' }),
  withMethods((store) => ({
    logout() {},
  })),
  withValidateFeature()
);

const store: ValidateFeature = new Store();

[rainerhahnekamp]

@PhilippMDoerner, sorry, but is your code snippet a possible solution to @devkirr or another question? Manfred put this version into the toolkit and I've been upgrading it with every new version of the SignalStore.

So if it is another question, could you please put it into a new issue and we can continue to work on a fix there?

[PhilippMDoerner]

It's not a solution, it's just closely related so I felt odd making a new issue for it, but I think I agree with you now it makes more sense as its own thing - TS can by complicated enough 😄

I'll delete the comment above as it otherwise is just noise.

[devkirr]

@rainerhahnekamp some interesting things here. But my exact need is this:

type AuthFeature = {
  roleName: Signal<string>;
  logout(): void;
};

const withAuthFeature = (() => {
  return signalStoreFeature(
    {
      state: {}
      methods: {},
    },
    withState({ roleName: 'admin' }),
    withMethods((store) => ({
      logout() {},
    })),
  );
}) satisfies () => SignalStoreFeature<
  EmptyFeatureResult,
  EmptyFeatureResult & {
    state: { roleName: string };
    methods: { logout: () => void };
  }
>;

export const Store = signalStore(
  withAuthFeature()
);

function validate(store: AuthFeature) {
  if (store.roleName() !== 'admin') {
    store.logout();
  }
}

validate(store); // => would it work?

[rainerhahnekamp]

With some slight changes it works: https://stackblitz.com/edit/github-7z9tqy?file=src%2Fauth.ts

import { Signal, Type } from '@angular/core';
import {
  EmptyFeatureResult,
  signalStore,
  signalStoreFeature,
  SignalStoreFeature,
  withMethods,
  withState,
} from '@ngrx/signals';

type AuthFeature = {
  roleName: Signal<string>;
  logout(): void;
};

const withAuthFeature = (() => {
  return signalStoreFeature(
    withState({ roleName: 'admin' }),
    withMethods((store) => ({
      logout() {},
    }))
  );
}) satisfies () => SignalStoreFeature<
  EmptyFeatureResult,
  EmptyFeatureResult & {
    state: { roleName: string };
    methods: { logout: () => void };
  }
>;

export const Store: Type<AuthFeature> = signalStore(withAuthFeature());

function validate(store: AuthFeature) {
  if (store.roleName() !== 'admin') {
    store.logout();
  }
}

const store = new Store();
validate(store); // => would it work?

[devkirr]

Yes it worked perfectly. I add this to the Feature definition to ensure that getState or patchState function worked as well thank you!

type AuthFeature = {
  roleName: Signal<string>;
  logout(): void;
} & StateSignal<{ roleName: string }>;