How to use a generic interface as store type?

[xypnox]

Hi,

I have a generic interface:

interface StoreState<Item> {
  items: Item[]
  getItems: () => Item[] 
//...
}

How can I create a zustand store using it as the store type?

I have tried const useSearchViewStore = create<SearchViewState<Item>>((set) => (/*...*/)) but typescript error says:
Cannot find name Item

[dai-shi]

How about this?
https://codesandbox.io/s/tender-bell-95sko3?file=/src/App.tsx

interface StoreState<Item> {
  items: Item[];
}

const useStoreBase = create<StoreState<any>>((set) => ({
  items: []
}));

export const useStore = <Item, Slice>(
  selector: (state: StoreState<Item>) => Slice
) => useStoreBase(selector);

[AndresdoSantos]

Hi, I know Slice is a generic one, but how should it be used? Is it the return from the useStore hook?

I did it as a return from the useStore hook and I got the error:

An argument for 'selector' was not provided.

[dai-shi]

Can you provide a code snippet or a small codesandbox repro?

[AndresdoSantos]

Thanks for helping me.

Before showing the code I will say what I expect from it:

• I want a hook that provides data to a table

The dynamic is like this:

1. Bring in the API data
2. Repost them to the table
3. Display them in the table

Which files use generic types?

Table.tsx
useData.ts
get.ts

What is the problem I have?

• I can't pass types to useData preventing me from having the data correctly inside the main component.

Here is the codeSandbox link: https://codesandbox.io/s/generic-types-in-zustand-y79mij

[dai-shi]

There's no magic. You need to assert types: https://codesandbox.io/s/generic-types-in-zustand-forked-qd5lg7?file=/src/hooks/useData.ts
Note that we are making types to lie. (runtime errors can happen.)

So, I would prefer type assertion on use: https://codesandbox.io/s/generic-types-in-zustand-forked-2qyr0c?file=/src/App.tsx

[AndresdoSantos]

Thanks!

[moklick]

Hey @dai-shi ,

thanks this is already helpful but I can't get it to work. In this codesandbox I am using your example to specify the types of the store items. As soon as I pass a generic for items, the returned type is not correct anymore. Adjusted example:

https://codesandbox.io/p/sandbox/modest-blackwell-m3mhxx?file=%2Fsrc%2FApp.tsx%3A20%2C1-21%2C1

It seems that I have a misunderstand of TS in this case but I can't figure out what's wrong.

[dai-shi]

Does this help? https://tsplay.dev/NnoQvm

import { create } from "zustand";
import "./styles.css";

interface StoreState<Item> {
  items: Item[];
}

const useStoreBase = create<StoreState<any>>((set) => ({
  items: [],
}));

type StoreItem = { value: number };

export const useStore = <Item, Slice>(
  selector: (state: StoreState<Item>) => Slice,
) => useStoreBase(selector);

export default function App() {
  const items = useStore((s: StoreState<StoreItem>) => s.items);
  //    ^?

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>{JSON.stringify(items)}</div>
    </div>
  );
}

[dai-shi]

Or this: https://tsplay.dev/NnoQvm

import { create, StoreApi, UseBoundStore } from "zustand";
import "./styles.css";

interface StoreState<Item> {
  items: Item[];
}

const useStoreBase = create<StoreState<any>>((set) => ({
  items: [],
}));

type StoreItem = { value: number };

export const useStore: UseBoundStore<StoreApi<StoreState<StoreItem>>> =
  useStoreBase;

export default function App() {
  const items = useStore((s: StoreState<StoreItem>) => s.items);
  //    ^?

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>{JSON.stringify(items)}</div>
    </div>
  );
}

[moklick]

thanks a lot! I got it now :) The main issue was, that I didn't know that TS infers all generics or none. I wanted the first generic (StoreItem) to be passed by the user and the second (StateSlice) inferred. As explained in your solution, it's better to let the user pass the Item type to the selector.