Middleware in TypeScript

Hi, I’d like to use zustand with TypeScript. Any chance you can write the example middlewares (log and immer) with TypeScript so I can follow and imitate?

I’d really appreciate it. Thank you. @JeremyRH @drcmda.

[coffee-cup]

I have found this middleware type useful

type Middleware<S> = (
  config: StateCreator<S>,
) => (set: SetState<S>, get: GetState<S>, api: StoreApi<S>) => S;

const log: Middleware<StoreType> = config => (set, get, api) =>
  config(args => {
    console.log("  applying", args)
    set(args)
    console.log("  new state", get())
}, get, api);

[JeremyRH]

Ah sorry, I misunderstood you. The types are exported so you can use them:

import create, { StateCreator, SetState, GetState, StoreApi } from 'zustand'

interface YourState {
  a: number,
  b: string
}

const log = (config: StateCreator<YourState>) => (
  set: SetState<YourState>,
  get: GetState<YourState>,
  api: StoreApi<YourState>
) => config(args => {
  console.log("  applying", args)
  set(args)
  console.log("  new state", get())
}, get, api)