[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?

[rainerhahnekamp]

@Pizzicato do you have a small example for that? pseudocode should be enough. Do you mind open a new discussion for that one?