[signalStore] How to refer to the type of a particular store?

[jits]

How can I refer to the type of a particular store?

E.g. if I want to pass the store as an argument into a function:

type AuthState = { user: User | null };

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

const aHelperFunction = (store: ???) => {
   // Here I want to be able to access `store.user()` (and anything else published by the store, like computed signals and methods).
}

I've tried store: typeof AuthStore but this gives a type of Type<…>, which seems to be something from @angular/core — "Represents a type that a Component or other object is instances of." — and there doesn't seem to be a way to refer to the "internals" of the store from this type.

I suspect I'm missing some knowledge here on a) how the signal store is modelled (with an inner SignalStore class) and/or b) something to do with signals and injection context meaning we can't easily use the store like this, in arbitrary functions.

[markostanimirovic]

You can define the type of the SignalStore in the following way:

// users.store.ts

export const UsersStore = signalStore(
  withState({ users: [] as User[] })
);

export type UsersStore = InstanceType<typeof UsersStore>;

Note: Exported type has the same name as the UsersStore constant. This is not required, but when defined like this, imported UsersStore can be used as a type as well as value:

// 1) as a type:
import { UsersStore } from './users.store';

function doSomething(usersStore: UsersStore) {}

// 2) as a value:
import { UsersStore } from './users.store';

class UsersComponent {
  readonly usersStore = inject(UsersStore);
}

// 3) type + value:
import { UsersStore } from './users.store';

@Component({
  providers: [UsersStore], // value
})
class UsersComponent {
  constructor(readonly usersStore: UsersStore) {} // type
}

[jits]

Great! Thanks for that comprehensive answer, Marko.

[jits]

When defining the type with the same name as the constant, in the same file, TypeScript complains with the error:

Duplicate identifier 'AuthStore'.ts(2300)

See the comments below.

[markostanimirovic]

Here is the example: https://stackblitz.com/edit/stackblitz-starters-3twl8g?file=src%2Fmain.ts

[jits]

Thanks @markostanimirovic.

I'm only getting the error when defining the store as a class.

const _AuthStore = signalStore(…);

@Injectable({ providedIn: 'root' })
export class AuthStore extends _AuthStore {
  …
}

export type AuthStore = InstanceType<typeof AuthStore>;

So it's a bit of an edge case. See next comment.

[jits]

Okay, so it's just me getting myself in a hole with TypeScript 😓 — there's no need for the additional export type if you already have a class definition!

Apologies for the unnecessary back and forth.

[Pizzicato]

Hi! This works well when the store instance has been created, but how could it be done before that, for example, if I need to access the store type from a function that returns an rxMethod depending on a parameter, and that function is used inside one of the withMethods declaration?

[devkirr]

@Pizzicato add the following type to the store definition passed into your function

type Store = {
  load: (id: number) => Promise<void>
} & StateSignal<TypeOfYourState>

function asyncMethod(myService: MY_SERVICE, partialStore: Store) {

}

I did that to be able to pass a partial Store into a directive @Input() to access state and call store methods and it worked well.

[Pizzicato]

@devkirr thanks for the suggestion! I tried and it seems to return typescript errors when using a store with that type in the patchState function, so I guess that's an approximation to the Store type, but not a full one.

[Pizzicato]

@rainerhahnekamp I found some time to fulfill your requests:

1. Stackblitz
2. Issue

Thanks a lot! BTW I really enjoy watching your YouTube channel, really nice and last minute content, keep it up! 💟

[devkirr]

@devkirr thanks for the suggestion! I tried and it seems to return typescript errors when using a store with that type in the patchState function, so I guess that's an approximation to the Store type, but not a full one.

@Pizzicato you're right, StateSignal worked for getState method but to use patchState you need the type WritableStateSource instead

[markostanimirovic]

#4547 (comment)