Zustand+TypeScript使用persist中间件时如何正确为store定义类型

解决方案 #

你遇到的是Zustand中间件的类型推导问题，只需要调整泛型的声明方式即可，有两种可行写法： #

写法1（官方推荐柯里化写法）

先给create指定状态类型，再传入被persist包装的创建函数，TS会自动完成类型匹配：

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CartState {
  cart: { [id: string]: CartDto };
  addItem: ({ id, image, name, price }: Omit<CartDto, "quantity">) => void;
  removeItem: (id: string) => void;
  reset: () => void;
}

export const useCart = create<CartState>()(
  persist(
    (set, get) => ({
      cart: {},
      addItem: ({ id, image, name, price }) => {
        set(() => {
          const cart = get().cart;
          if (!cart[id]) {
            cart[id] = {
              id,
              image,
              name,
              price,
              quantity: 0
            };
          }
          cart[id].quantity += 1;
          return { cart };
        });
      },
      removeItem: (id) => {
        set(() => {
          const cart = get().cart;
          if (!cart[id]) {
            return { cart };
          }
          const newQuantity = cart[id].quantity - 1;
          if (newQuantity <= 0) {
            delete cart[id];
          } else {
            cart[id].quantity = newQuantity;
          }
          return { cart };
        });
      },
      reset: () => {
        set(() => {
          return { cart: {} };
        });
      }
    }),
    {
      name: "cart",
      getStorage: () => localStorage
    }
  )
);

写法2（给persist指定泛型）

直接把状态类型传给persist方法，不需要给create加泛型：

export const useCart = create(
  persist<CartState>(
    (set, get) => ({
      // 同上原有逻辑不变
    }),
    {
      name: "cart",
      getStorage: () => localStorage
    }
  )
);

原因说明 #

原来的写法报错是因为persist包装后的状态创建函数类型和create<CartState>直接要求的参数类型不匹配，persist会给store注入内置的持久化相关属性，需要通过上述两种写法让TS正确推导中间件处理后的类型，无需手动声明StoreApiWithPersist这类内部类型。

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