Typescript?

[Brentably]

How do I use with typescript?

Typescript Zustand Docs: https://github.com/pmndrs/zustand/blob/main/docs/guides/typescript.md

getting errors, the syntax is weird with typescript

[lgn-lvx3]

@Brentably I was able to finally get this to compile and work, and show up in a chrome browser. The answer was basically hacking the middleware that doesn't change the store type to call zukeeper instead of logging. Hope it helps.

import createAppSlice, { AppSlice } from "./_AppSlice"
import createDataSlice, { DataSlice } from "./_DataStore"
import { State, StateCreator, StoreMutatorIdentifier, create } from "zustand"
import { immer } from "zustand/middleware/immer"
import zukeeper from "zukeeper"

export type StoreState = AppSlice & DataSlice

// example section here
type ZukeeperTS = <
    T extends State,
    Mps extends [StoreMutatorIdentifier, unknown][] = [],
    Mcs extends [StoreMutatorIdentifier, unknown][] = [],
>(
    f: StateCreator<T, Mps, Mcs>,
) => StateCreator<T, Mps, Mcs>

type ZukeeperTSImplType = <T extends State>(
    f: StateCreator<T, [], []>,
) => StateCreator<T, [], []>

const zukeeperTs: ZukeeperTSImplType = (...a) => {
    return zukeeper(...a)
}

export const zukeeperTsLogger = zukeeperTs as unknown as ZukeeperTS

// end example section

const useBoundStore = create<StoreState>()(
    immer(
        zukeeperTsLogger((...a) => ({
            ...createAppSlice(...a),
            ...createDataSlice(...a),
        })),
    ),
)

// also needed to add this
declare global {
    interface Window {
        store: any
    }
}

window.store = useBoundStore

export default useBoundStore

[calebemachado]

The above solution worked for most of the problems but for some reason, trying to run the nextjs project it throws error related to the window declaration:

 ⨯ src/@shared/store/store.ts (77:1) @ window
 ⨯ ReferenceError: window is not defined
    at eval (webpack-internal:///./src/@shared/store/store.ts:41:1) {
  page: '/'
}
  75 | }
  76 |
> 77 | window.store = useBoundStore
     | ^
  78 |
  79 | export const useStore = useBoundStore
  80 |
 ✓ Compiled /_error in 44ms (1183 modules)

[dpnova]

abandonware?