Passing a TypeScript Generic to the store's type

[zorzysty]

I need to pass a TS generic to the type describing the store, but I can't figure out how to pass it through the create function.

I'm hoping to achieve something similar to the code below, but here of course the Bear inside create<State2<Bear>> is not defined:

// inside the store file
type State<Bear> = {
  bears: Bear[]
  increase: (newBear: Bear) => void
}
​
export const useStore = create<State<Bear>>((set) => ({
  bears: [],
  increase: (newBear) => set((state) => ({ bears: [...state.bears, newBear] })),
}))
​
// and in a file using the store
type Bear = {
  kind: "Grizzly" | "Polar"
  age: number
}
​
const bears = useStore<Bear>((state) => state.bears)

I tried to wrap the result of create in a function that accepts a generic, which made TS happy, but in the runtime I of course I got "Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.(...)". This can be mitigated by invoking state by useState()(state => state.bears), but it doesn't seem right.

Inb4, I can't declare the Bear type in the store file as in reality I'm getting it as a generic as well and I simply must pass it along to the store.

Is there a way to do it properly?

[dai-shi]

I don't know if there's a TS-only way. If we can use a wrapper, something like this?

const useStoreUnknown = create<State<unknown>>((set) => ({
  bears: [],
  increase: (newBear) => set((state) => ({ bears: [...state.bears, newBear] })),
}))

export const useStore = <Bear>(selector StateSelector<State<Bear>>): State<Bear> => useStoreUnknown(selector)

Or, maybe this works?

export const useStore = create<State<unknown>>((set) => ({
  bears: [],
  increase: (newBear) => set((state) => ({ bears: [...state.bears, newBear] })),
}))

  // in component
  const bears = useStore<State<Bear>>((state) => state.bears)

[dai-shi]

Inlining is not good. store (useStore) should be created outside React.

How about this?

export const useStore = <T extends Record<string | number | symbol, unknown>, U>(
  selector: StateSelector<State<T>, U>
): State<T> => useStoreAny(selector)

[zorzysty]

With this approach you must explicitly declare the return value you expect when calling useStore - which technically works, but means loosing type-safety (you're effectively overriding the type of the return value).
I created a CodeSandbox: https://codesandbox.io/s/serene-bas-0b3f8?file=/src/App.tsx where you can quickly check it yourself.

And thanks for the tip about moving store creation outside of React :)

[dai-shi]

Ah ha, yeah, it requires to specify the return value type...

I don't think it's possible without double arrows, which is not good for hooks.

Maybe this one is better.
https://codesandbox.io/s/pedantic-kare-p09ec?file=/src/store.ts

export type UseStore<T> = UseStoreOrig<State<T>>;

export const useStoreUnknown = create<State<unknown>>((set) => ({
  bears: [],
  increase: (newBear) => set((state) => ({ bears: [...state.bears, newBear] }))
}));

const bearsD = (useStoreUnknown as UseStore<Bear>)((state) => state.bears);

[zorzysty]

Yeah, this will work 😎
Thank you @dai-shi! You are awesome!

BTW, do you think it's technically possible to make it a built-in feature of zustand - without the need for wrappers, unknowns and explicit type casting? If so, I can create a feature request and maybe even give PR a shot if somebody points me in the right direction.

[dai-shi]

Hm, I'd say the last solution is more like a built-in feature.

If you or somebody has any idea to improve typing, suggestions are welcome.