Propersal: A easier way for middleware typescript design

[GuichiZhao]

The current typescript middleware design is way too complicated for an average typescript user like me, I tried to follow up #710, The takeaway is that we try to propagate though the mutation to top level, and there is a very complicated protocol to force the way we use typescript

In order to achieve the same result, there may be a simpler way

export interface StoreApi<T = unknown> {
  getState: () => T
  getInitialState: () => T
  subscribe: (listener: (state: T, prevState: T) => void) => () => void
}

type Creator<T, Store extends StoreApi> = (store: Store) => T

const create = <T, Store extends StoreApi>(creator: Creator<T, Store>) => {
  return {} as StoreApi<T> & GetMutation<Store>
}

type GetMutation<Store extends StoreApi> = Store extends StoreApi & infer Rest
  ? Rest
  : never

type MutationA = { a: number; getInitialState: () => 111 }
const withA = <
  T,
  StoreIn extends StoreApi,
  StoreOut extends StoreIn & MutationA,
>(
  creator: Creator<T, StoreIn>,
): Creator<T, StoreOut> => {
  return (store: StoreOut) => {
    store.a = 11
    return creator(store)
  }
}

type MutationB<T> = { b: string; c: T }
const withB = <
  T,
  StoreIn extends StoreApi,
  StoreOut extends StoreIn & MutationB<T>,
>(
  creator: Creator<T, StoreIn>,
): Creator<T, StoreOut> => {
  return (store: StoreOut) => {
    store.b = 'b'
    return creator(store)
  }
}

const s = create(
  withB(
    withA((store) => {
      return {
        foo: 'foo',
      }
    }),
  ),
)
// StoreApi<{
//   foo: string;
// }> & MutationA & MutationB<{
//   foo: string;
// }>

The code is simple enough for a average typescript user to understand, how you guys think about it?

[dai-shi]

Sure, I wish it would have been easier. There's a chance though. Since v5, we dropped some old TS versions, so there should be some rooms for improvement.

Your code snippet looks like basically the same as what we are doing. You may want to try using zustand creator signature (set, get, api) => state.

We can't always infer types from the bottom, and we need support the explicit state typing use case create<T>()(...).

btw, personally I'm not in favor of explicit state typing and I'm pushing alternative solutions like zustand-slices.

for an average typescript user

As I understand, zustand api isn't typescript first (= mutation), and this is a challenge for an advanced typescript user.

[GuichiZhao]

The point of my proposal is not to target how to infer type from the input but how middleware mutates the store type.
The current middleware mutation method is based on #710, which is prohibitively hard to use. My proposal is much easier and can achieve the same result.

The idea is to specify the StoreIn and StoreOut explicitly, rather than do the same thing based on Mps and Mcs protocol

@devanshj