如何修改Zustand TypeScript示例代码以解决类型问题？

你的代码里的类型问题出在自定义中间件myMiddlewares缺少正确的类型声明，导致TypeScript无法正确推导中间件的输入输出类型。以下是两种可行的修复方式：

方式一：给自定义中间件添加类型标注 #

从zustand导入Middleware类型，明确中间件的类型约束：

import { create, Middleware } from "zustand";
import { devtools, persist } from "zustand/middleware";
// 标注中间件的类型
const myMiddlewares: Middleware = (f) => devtools(persist(f, { name: "bearStore" }));

interface BearState {
  bears: number;
  increase: (by: number) => void;
}

const useBearStore = create<BearState>(
  myMiddlewares((set) => ({
    bears: 0,
    increase: (by) => set({ bears: by }),
  })),
);

export default useBearStore;

方式二：直接链式调用中间件（更简洁） #

不需要单独抽离中间件变量，直接把devtools和persist链式组合，TypeScript会自动推导类型：

import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";

interface BearState {
  bears: number;
  increase: (by: number) => void;
}

const useBearStore = create<BearState>(
  devtools(persist((set) => ({
    bears: 0,
    increase: (by) => set({ bears: by }),
  }), { name: "bearStore" }))
);

export default useBearStore;

两种方式都能解决类型报错问题，方式二更推荐——既避免了手动维护中间件类型，代码结构也更紧凑。

内容的提问来源于stack exchange，提问作者aoda