typings problem

[metalllus]

Hi, suppose I have this:

type StoreA = {
  color: string;
  size: number;
};

const initialStateA = {
  color: "red",
  size: 10,
};

export const testStoreA = signalStore(
  { providedIn: "root" },
  withState<StoreA>(initialStateA),
  withComputed((state) => ({
    combined: computed(() => state.color + " " + state.size.toString()),
  })),
  withMethods((store) => ({
    setColor: (color: string) => setColor(color, store),
  }))
);

function setColor(color: string, store: SomeStoreType) {
  patchState(store, (state: SomeStateType) => ({
   ...
  }));
}

My question is how do I properly type SomeStoreType and SomeStateType to get proper Intellisense on the state field within the patchState function.

[rainerhahnekamp]

You do that via the StateSignal type:

function setColor(color: string, store: StateSignal<StoreA>) {
  patchState(store, { color });
}

or

function setColor(color: string, store: StateSignal<StoreA>) {
  patchState(store, state => ({color}));
}

[metalllus]

@rainerhahnekamp Thanks for the response, this works but if this function is a complex async RxMethod, I need also the access to the store signals from within the function.
If I type the store as StateSignal<StoreA>, I cannot access the signals anymore. If I type everything to any, the access to the signals works fine so it must be just a typings problem.

function setColor(color: string, store: StateSignal<StoreA>) {
  const size = store.size() // invalid now...

  patchState(store, state => ({color}));
}

[rainerhahnekamp]

Ok, then you have that option:

export const testStoreA = signalStore(
  { providedIn: 'root' },
  withState<StoreA>(initialStateA),
  withComputed((state) => ({
    combined: computed(() => state.color + ' ' + state.size.toString()),
  })),
  withMethods((store) => ({
    setColor: (color: string) => patchState(store, { color }),
  }))
);

type TestStoreA = InstanceType<typeof testStoreA>;

function doSomethingWithStore(color: string, store: TestStoreA) {
  store.setColor(color);
}

As you see, I don't call doSomethingWithStore in setColor. Your example had a cyclic dependency, where function setColor had a dependency to the store and the store's setColor had a dependency to the outer setColor. That's not going to work.

[metalllus]

@rainerhahnekamp Thanks for your answers. I really appreciate it. But please consider this example. I rewrote it a bit to be closer to my use case.

type StoreA = {
  color: string;
  size: number;
};

const initialStateA = {
  color: "red",
  size: 10,
};

export const testStoreA = signalStore(
  { providedIn: "root" },
  withState<StoreA>(initialStateA),
  withComputed((state) => ({
    combined: computed(() => state.color + " " + state.size.toString()),
  })),
  withMethods((store, auth = inject(Auth)) => ({
    listenToAuthState: listenToAuthState(auth, store),
    setColor: (color: string) => setColor(color, store),
  }))
);

type TestStoreA = InstanceType<typeof testStoreA>;

function listenToAuthState(auth: Auth, store: TestStoreA) { // TestStoreA invalid here: 'store' is referenced directly or indirectly in its own type annotation.
  return rxMethod(
    pipe(
      switchMap((_) => authState(auth)),
      tap((firebaseUser) => {
        if (firebaseUser && store.size() > 0) {
          store.setColor("blue");
        } else {
          store.setColor("red");
        }
      })
    )
  );
}

function setColor(color: string, store: TestStoreA) {
  patchState(store, (state) => ({ color }));
}

[rainerhahnekamp]

@metalllus you need to get rid of this circular dependency. that is not ngrx related but a general issue in software development.

You could fix by decoupling the hard dependency to TestStoreA:

type StateWithColor = StateSignal<{color: string}>;

function listenToAuthState(auth: Auth, store: StateWithColor) { // TestStoreA invalid here: 'store' is referenced directly or indirectly in its own type annotation.
  return rxMethod(
    pipe(
      switchMap((_) => authState(auth)),
      tap((firebaseUser) => {
        if (firebaseUser && store.size() > 0) {
          store.setColor("blue");
        } else {
          store.setColor("red");
        }
      })
    )
  );
}

function setColor(color: string, store: StateWithColor) {
  patchState(store, (state) => ({ color }));
}

I haven't tried out the code but I hope it is working.