Auto type inference for store

[dhmk083]

Not really an issue, just a suggestion.

I found a way to let typescript to infer store type. It just needs some hacking, but it's quite short and also works better than combine middleware.

Here's the demo (also codesandbox):

// small helper
const getParams = <T extends { setState; getState }>(args) =>
  [...args] as [T["setState"], T["getState"], T];

// 1. function style
const useStore = create(function () {
  const [set, get, api] = getParams<typeof useStore>(arguments);

  return {
    id: 123,
    name: "test",

    setId() {
      set({ id: 1 });
    },

    setName() {
      set({ name: "abc" });
    },

    setBoth() {
      get().setId();
      get().setName();
    }
  };
});

// 2. arrow function style
const useStore2 = create((...args: any[]) => {
  const [set, get, api] = getParams<typeof useStore2>(args);

  return {
    id: 123,
    name: "test",

    setId() {
      set({ id: 1 });
    },

    setName() {
      set({ name: "abc" });
    },

    setBoth() {
      get().setId();
      get().setName();
    }
  };
});

So, the idea is to omit set, get, api parameters from function to break circular type dependency. It lets typescript to infer store type by return value only.

And if you have "target": "es5" in your tsconfig.json, then it's even simpler:

import create, { GetState } from 'zustand'

create((set, get: GetState<typeof _self>) => {
  const _self = {
    name: "test",

    test() {
      set({ name: "abc" });
    },
  };

  return _self;
});

Unfortunately, it doesn't work with any other targets, only with es5.

[dai-shi]

Very interesting: https://tsplay.dev/mq5Jqm

@devanshj thoughts?

[devanshj]

It's good but just feels awkward and hacky to write imo.

[dai-shi]

yeah, curious how this does work?

[devanshj]

As explained in the "Why can't we just simply infer the type from initial state?" section of the typescript doc, the inference doesn't work because of invariance (get: () => T) => T but if you remove the parameter and make it () => T then this is no longer invariant and typescript can infer T from the returned value. A more minimal version of the same behavior would be this...

declare const f:
  <T>(f: (t: T) => T) => T

let t0 = f(_ => "hello") // t0 has type unknown
let t1 = f(() => "hello") // t1 has type string

[dai-shi]

thanks.

[dhmk083]

As noted in https://github.com/pmndrs/zustand/blob/main/docs/typescript.md:

Here if you look at the type of f in create ie (get: () => T) => T it "gives" T as it returns T but then it also "takes" T via get so where does T come from TypeScript thinks... It's a like that chicken or egg problem. At the end TypeScript gives up and infers T as unknown.

But if a function doesn't have input arguments, then typescript can infer T from return value. And then we can use typeof that value for getParams.

The second solution (for ES5) is even better and shorter and technically not a hack, as we are giving TS a hint about our type. I wish it would work for ESNext target too. I guess it's related to different hoisting rules between es5 and es6.

[abuu-u]

when TypeScript 5.4.0 releases NoInfer<T> should solve this

[dhmk083]

Here is a revised version: https://tsplay.dev/N9167N

It removes the need for function, as it might be confusing, and requires only a single type cast.

[shfrmn]

Hey @dhmk083,

I just published a package that allows to infer the type of the store. The approach is quite similar to yours, but not exactly the same. Take a look if you're interested - https://github.com/shfrmn/zustand-types

[dhmk083]

Yes, it's good, but it doesn't take into account any middleware. For example, if store looks like this:

import { immer } from 'zustand/middleware/immer'

function MyStore(set: SetState<typeof MyStore>) {
...
}

export const useStore = create(immer(MyStore))

Then your types won't be able to see that set can also be an immer-style setter.

[max-prtsr]

@dhmk083 can I use you solution #991 (comment) with middleware?

[dhmk083]

Yeah, it should work fine.

[max-prtsr]

@dhmk083 how to set types with your solution? I tried as but it's a bit ugly

const useStore = create(function () {
  const [set, get, api] = getParams<typeof useStore>(arguments);

  return {
    id: undefined as number | undefined,
    name: undefined as string | undefined,
    ...
  };
});

[dhmk083]

I'm afraid that's the only way. But I'll try to think about it, althought it may be ugly too.

[dhmk083]

Well, if the T | undefined is the most frequent case, then you can write a small type helper. But it also feels ugly and overcomplicated.

const opt = <T>(x?: T) => x

...

return {
  id: opt<number>(),    // number | undefined
  name: opt<string>(),  // string | undefined
}