Using subscribeWithSelector and immer middleware

I am using v4.0 (TS 4.5.5) and trying the standard immer middleware and subscribeWithSelector:

export const store = create<
  Store
>()(subscribeWithSelector(immer((set, get) => createRootSlice(set, get))));

but I got this error:

TS4023: Exported variable 'store' has or is using name 'StoreSubscribeWithSelector' from external module "zustand/middleware/subscribeWithSelector" but cannot be named.

Am I doing something wrong, or it is a problem with Zustand v4?

[devanshj]

Actually I realized TS4023 occurs only for subscribeWithSelector (and not for other middlewares) because that’s the only middleware that uses interface for intermediate types instead of type alias. So we can fix it for subscribeWithSelector by using a type alias (and we’re already using them instead of interfaces in most places, I usually prefer interface but in this case I think type aliases are fine).

But the .d.ts files still look a bit ugly as it inlines all the types (as it does now also for other middlewares) but I guess that’s okay.

So I’ll open a PR for using type aliases.

[devanshj]

The problem is with --declaration TS emits .d.ts files which looks something like this…

export declare const useStore: TheType

Now to write the actual type instead of TheType TS needs StoreSubscribeWithSelector in the scope, which it isn’t right now hence it complains.

But useStore’s type actually never directly uses StoreSubscribeWithSelector, it’s type actually is this…

Mutate<
  StoreApi<State>,
  [
    ["zustand/subscribeWithSelector", never],
    ["zustand/immer", never]
  ]
>

It only later resolves to a type that uses StoreSubscribeWithSelector. So typescript should emit the above type, not the one it resolves to (this might be a bug in TS).

So one workaround is to explicitly type useStore with the above type and then TS will emit that…

import create, { Mutate, StoreApi } from "zustand";
import { subscribeWithSelector } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";

type State = {
  count: number;
  inc: () => void;
};

type Store =
  Mutate<
    StoreApi<State>,
    [
      ["zustand/subscribeWithSelector", never],
      ["zustand/immer", never]
    ]
  >

export const useStore: Store = create<State>()(
  subscribeWithSelector(
    immer((set) => ({
      count: 0,
      inc: () => set((state) => ({ count: state.count + 1 }))
    }))
  )
);

This will compile, as you can see here.

Another solution could be that we export StoreSubscribeWithSelector (and the many other types) but that still won’t solve the problem as you’ll also have to import them to bring them in the scope (even if you’re not using them). But even that is problematic because we don’t want to export our intermediate types nor .d.ts should emit them as they are not to consumed directly.

And of course if you can remove --declaration then the problem gets solved entirely.

I personally think it’d make sense that the users explicitly annotate the exports instead of us exporting the types and making a compromise. But I’ll let @dai-shi take the call if we want --declaration (which is false by default) users to annotate their exports or we should export those our types.