reactjs - 如何使用 Zustand 进行切换

Question

我使用 Zusand 创建了以下商店：

import create from "zustand"

const useStore = create((set) => ({
  show: false,
  toggleShow: () => set((state) => ({ show: !state.show })),
}))

我认为这将是切换show. 然而，打字稿并不高兴——它在下面有一条红色的波浪线，show并!state.show带有以下错误消息：

Property 'show' does not exist on type 'object'.ts(2339)
any

知道为什么我会收到该错误消息以及如何使用 Zusstand 正确设置切换功能吗？

谢谢。

Answer 1

Typescript 不知道你的 state 应该是什么样子，所以它假设 state 是一个普通的对象。

为了解决这个问题，您可以为您的商店定义一个类型。create然后，您可以将该类型作为泛型传递给函数：

type MyStore = {
    show: boolean;
    toggleShow: () => void;
};

// note the "<MyStore>" next to create
const useStore = create<MyStore>((set) => ({
    show: false,
    toggleShow: () => set((state) => ({ show: !state.show})),
}))

这使 typescript 知道哪些属性会出现在您的商店中。它不会再为!state.show部件抛出错误，并且每当您使用商店时，它都会提供有意义的自动完成功能。