Missing type inference when calling store.subscribe with a selector

[akbr]

Type inference breaks when using store.subscribe with a selector.

import createStore from "zustand/vanilla";

const store = createStore(() => ({
  hello: "world"
}));

store.subscribe((state) => {
  // 👍 state type is inferred here
  console.log(state.hello);
});

store.subscribe(
  (state) => {
    // 💥 state type "unknown" here
    console.log(state.hello);
  },
  ({ hello }) => ({ hello })
);

Here's a Codesandbox.

Is this a known limitation?

[dai-shi]

Yes. This is how TS works.
If we had designed the API for TS from the ground, we should have made it subscribe(selector, listener). Then, TS could infer types.

[akbr]

Thanks!

[chrisdrackett]

any chance this might be a breaking change in the future? While it would take a little effort to migrate, it wouldn't be too bad and could potentially use a codemod

[dai-shi]

We had a discussion on discord about this, and while changing the order solves the type inference issue, we concluded that API-wise it's not very intuitive and it doesn't worth the breaking change.

Another option I have in mind is to drop the selector subscribe entirely from the core, and provide middleware or something for it. Then, we could provide some options like to support #475. But, I don't have a plan to do it in v4 currently. So, if we don't, it's unlikely to happen some time in the near future. In any case, if we were to fix this with middleware, we can do it without dropping it. (Dropping is motivating to reduce bundle size.)

[dai-shi]

drop the selector subscribe entirely from the core, and provide middleware

Trying #601 to see if this path would work.

[dai-shi]

#601 is successful. So, I'd do with this path: support this issue and #475 as new middleware and deprecate the feature in core.