$50 if someone can help me use subscribeWithSelector with TypeScript in my app

[dumbmatter]

https://github.com/zengm-games/zengm/blob/11cdf79f87c69d67214446f580c8120ba943fe99/src/ui/util/local.ts#L30-L194 is my only Zustand store.

https://github.com/zengm-games/zengm/blob/11cdf79f87c69d67214446f580c8120ba943fe99/src/ui/components/Controller.tsx#L279-L298 is the one place I subscribe to it.

I see the deprecation message, and I see the example in the README. It works for a simple store, but when I try to use it here I get a giant mess of TypeScript errors and after like an hour of trying to figure out a better solution than casting the whole thing to any, I have not succeeded.

So can I pay someone here for their expertise?

I can pay by Paypal, Venmo, Zelle, a check in the mail, crypto.. whatever. I just would like to get rid of the deprecation warning without losing my nice TypeScript types :)

[dai-shi]

Sorry for the trouble.
Would you please try this:

create(subscribeWithSelector<...>((set) => ...))

If it's successful, you need to change the subscribe call, swap selector and callback:

  local.subscribe(selector, callback)

---

Related: #616

We should document it better..

[dai-shi]

Yes, this is improved in https://github.com/pmndrs/zustand/releases/tag/v3.6.2.

[dumbmatter]

Thanks! This tip plus the link in the release notes to https://github.com/pmndrs/zustand/blob/feef4d4db713992849ddb6b612c72e2ff107681d/tests/middlewareTypes.test.tsx made me realize that this works:

const useLocal = create(subscribeWithSelector<
	MyState,
	SetState<MyState>,
	GetState<MyState>,
	StoreApiWithSubscribeWithSelector<MyState>
>(set => ({

It would be nice if only one parameter was needed, like before, and it could automatically figure out those other 3. But I'm guessing that might be impossible if multiple middlewares are used. In which case, this is good enough.

You still might want to add something to the documentation about this, because even in that test file the types are all applied to create rather than subscribeWithSelector, but that doesn't seem to actually work because if MyState is something like {prop: false | string} and then your initial state is {prop: false}, it seems that within subscribeWithSelector it is not actually using the type info from MyState and instead infers that prop is a boolean, which can lead to type errors.

Anyway, if you tell me how to send you $50 I'll gladly do it, cause you definitely deserve it for your work here and elsewhere!

[dumbmatter]

Ah, I wasn't aware of that. Can you give me a full (but minimal) example? I think I get it, but just in case.

No actually I was being stupid, please ignore what I said there :)

[dai-shi]

So, does create<...>(subscribeWithSelector((set) => ...)) works for your use case?

[dumbmatter]

No, but create(subscribeWithSelector<...>((set) => ...)) does work, which is good enough for me. https://github.com/dumbmatter/zustand-middleware-typescript/blob/master/test.ts is a minimal example if you want to play around with it.

[dai-shi]

Thanks. I played around with it, and had the same conclusion.
It doesn't work, and the workaround is yours or foo: true as boolean | string.

[dai-shi]

#621 adds the test for future reference.

[oeddyo]

create(subscribeWithSelector<...>((set) => ...)) works for me too. Thanks @dai-shi

[dai-shi]

Good to hear that. Note that the current typing is not ideal and there's new work going on. #662.