How to define store functions outside zustand store with Typescript?

[itsramiel]

Hi all 👋

Assuming I have the following store:

type TCounterStore = {
  counter: number;
  increment: () => void;
  decrement: () => void;
};

const useCounterStore = create<TCounterStore>()((set) => ({
  counter: 0,
  increment: () => set((prev) => ({ counter: prev.counter + 1 })),
  decrement: () => set((prev) => ({ counter: prev.counter - 1 })),
}));

How can I move increment and decrement outside of the store definition. The reason I am asking is that a store tend to get too big when the logic inside is getting more complex and I would like to separate stuff for code readability:

type TCounterStore = {
  counter: number;
  increment: () => void;
  decrement: () => void;
};

const useCounterStore = create<TCounterStore>()((set) => ({
  counter: 0,
  increment: makeIncrement(set),
  decrement: makeDecrement(set),
}));

function makeIncrement(set: {idk}): TCounterStore['increment']{
  return function(){
    set((prev) => ({ counter: prev.counter + 1 }))
  }
}

function makeDecrement(set: {idk}): TCounterStore['decrement']{
  return function(){
    set((prev) => ({ counter: prev.counter - 1 }))
  }
}

The problem is that I do not know how to get the type of set and possible get too, so they are written here as {idk}. What is a good way to get the type?

[itsramiel]

I guess I found out:

function makeIncrement(set: StoreApi<TCounterStore>["setState"]): TCounterStore['increment']{
  return function(){
    set((prev) => ({ counter: prev.counter + 1 }))
  }
}

function makeDecrement(set: StoreApi<TCounterStore>["setState"]): TCounterStore['decrement']{
  return function(){
    set((prev) => ({ counter: prev.counter - 1 }))
  }
}