immer as middleware and use devtools typescript

[anver]

This is a contrived example but the code works when using immer as middleware and I don't get any errors on vscode

import { Draft, produce } from 'immer';
import create, { GetState, SetState, State, StateCreator, } from 'zustand';
import { devtools } from 'zustand/middleware'
type Todo = { id: string; status: string; title: string }
type TState = { todos: Todo[], add(payload: Todo): void };

const sliceTodo = (set: SetState<TState>, get: GetState<TState>): TState => ({
   todos: [],
   add(payload) { set(state => { state.todos.push(payload) }) }
});

const immer = <T extends State>
   (config: StateCreator<T>): StateCreator<T> =>
   (set, get, api) =>
      config((partial, replace) => {
         const nextState = typeof partial === 'function'
            ? produce(partial as (state: Draft<T>) => T)
            : partial as T
         return set(nextState, replace)
      },
         get,
         api
      )

const useStore = create<TState>(immer((set, get) => ({ ...sliceTodo(set, get) })))

export default useStore

but when I use devtools middleware then I get errors

const useStore = create<TState>(
   devtools(
      immer((set, get) =>
         ({ ...sliceTodo(set, get) })
      ))
)

One thing I love about zustand is the redux devtools middleware, please someone help fix this issue, thx.

Code with squiggly typescript errors

when devtools removed it's ok

extra information from vscode screenshot

[dai-shi]

Just to confirm, this is TypeScript only issue, right? It works if in JS (or all any in TS), I suppose.

[anver]

Just to confirm, this is TypeScript only issue, right? It works if in JS (or all any in TS), I suppose.

yes this is just typescript issue

[dai-shi]

Would you create a small reproduction with codesandbox?

[anver]

Would you create a small reproduction with codesandbox?

https://codesandbox.io/s/optimistic-cherry-plu1c?file=/src/App.tsx

I don't know how this works on codesandbox with redux detools enabled !

[anver]

Would you create a small reproduction with codesandbox?

Extra screenshots added for the error message from vscode, pls check above

[dai-shi]

I'm not sure if it helps, but I modified the test in the repo to follow the latest typing: #610

Maybe there's a difference in tsconfig, or typescript version?

[anver]

I'm not sure if it helps, but I modified the test in the repo to follow the latest typing: #610

Maybe there's a difference in tsconfig, or typescript version?

Same error

tsconfig.json

{
   "compilerOptions": {
      "incremental": true /* Enable incremental compilation */,
      "target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
      "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
      "lib": [
         "es6",
         "dom"
      ] /* Specify library files to be included in the compilation. */,
      "allowJs": true /* Allow javascript files to be compiled. */,
      "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
      "sourceMap": true /* Generates corresponding '.map' file. */,
      "outDir": "./dist" /* Redirect output structure to the directory. */,
      "removeComments": true /* Do not emit comments to output. */,
      "importHelpers": true /* Import emit helpers from 'tslib'. */,
      "strict": true /* Enable all strict type-checking options. */,
      "strictNullChecks": true /* Enable strict null checks. */,
      "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
      "resolveJsonModule": true,
      "isolatedModules": true,
      "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
      "paths": {
         "@src/*": ["src/*"],
         "@images/*": ["src/images/*"],
         "@styles/*": ["src/styles/*"],
         "@components/*": ["src/components/*"]
      } /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
      "typeRoots": [
         "./node_modules/@types",
         "./src/@types"
      ] /* List of folders to include type definitions from. */,
      "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
      "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
      "skipLibCheck": true /* Skip type checking of declaration files. */,
      "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
   },
   "include": ["src", "types"],
   "exclude": ["**/node_modules", "**/.*/"],
   "files": ["node_modules/gsap/types/index.d.ts"]
}

```ts

typescript version 4.4.4

[dai-shi]

What if you don't define sliceTodos and inline it?

[anver]

What if you don't define sliceTodos and inline it?

Same error

[Nikola-Milovic]

Adding to this, my sample

Argument of type '(set: SetState<AdminState>, get: GetState<AdminState>, api: StoreApi<{ saved: Saveable[]; save: (data: Saveable) => void; remove: (data: Saveable) => void; }> & { ...; } & { ...; }) => { ...; }' is not assignable to parameter of type 'StoreApi<AdminState> | StateCreator<AdminState, SetState<AdminState>, GetState<AdminState>, StoreApi<AdminState>>'.
  Type '(set: SetState<AdminState>, get: GetState<AdminState>, api: StoreApi<{ saved: Saveable[]; save: (data: Saveable) => void; remove: (data: Saveable) => void; }> & { ...; } & { ...; }) => { ...; }' is not assignable to type 'StateCreator<AdminState, SetState<AdminState>, GetState<AdminState>, StoreApi<AdminState>>'.
    Types of parameters 'api' and 'api' are incompatible.
      Type 'StoreApi<AdminState>' is not assignable to type 'StoreApi<{ saved: Saveable[]; save: (data: Saveable) => void; remove: (data: Saveable) => void; }> & { setState: NamedSet<{ saved: Saveable[]; save: (data: Saveable) => void; remove: (data: Saveable) => void; }>; } & { ...; }'.
        Property 'devtools' is missing in type 'StoreApi<AdminState>' but required in type '{ dispatch?: unknown; devtools: any; }'.ts(2345)
middleware.d.ts(23, 5): 'devtools' is declared here.

import create from "zustand";
import { devtools } from "zustand/middleware";
import Saveable from "./interfaces/saveable";
import { produce } from "immer";

export default interface Saveable {
    id: string;
    type: string;
}

interface AdminState {
    saved: Saveable[];
    save: (data: Saveable) => void;
    remove: (data: Saveable) => void;
}

const savedTyped: Saveable[] = [];

const useStore = create<AdminState>(
    devtools((set) => ({
        saved: savedTyped,
        save: (data: Saveable) =>
            set(
                produce((state: AdminState) => {
                    const fouAd = false;
                    state.saved.forEach((item: Saveable) => {
                        if (data.id === item.id) {
                            found = true;
                        }
                    });
                    if (!found) {
                        state.saved.push(data);
                    }
                }),
            ),
        remove: (data: Saveable) =>
            set(
                produce((state: AdminState) => {
                    let index = -1;
                    state.saved.forEach((item: Saveable, i: number) => {
                        if (data.id === item.id) {
                            index = i;
                        }
                    });
                    if (index > -1) {
                        state.saved.splice(index, 1);
                    }
                }),
            ),
    })),
);

[dai-shi]

Could you create a minimal reproduction in codesandbox, or if it doesn't work, in github?

[anver]

Making devtools optional inside middleware.d.ts fixed the issue

but is it ok to make the prop devtools must be answered by some experts here .... @dai-shi

[dai-shi]

Ohhh, nice catch!
It's because of the change in #601.

don't know how this works on codesandbox with redux detools enabled !

Now, I have the same feeling.

Anyway, this is a proper fix:
https://codesandbox.io/s/muddy-cdn-8psi0?file=/src/store/index.ts

This is something I overlooked when releasing v3.6.0.

We've discussed this fundamental issue internally, but it can't be helped due to the current TS behavior.
I will update the docs and see if it works. If it's too much trouble, we could make it optional, but that's not really the intention of #601.