如何为 React Action Hook Store 定义 Typescript 属性和类型

Question

在Tanner Linsley 在这里描述的“动作钩子模式”之后，我正在使用钩子创建一个反应状态管理存储。

我正在学习 Typescript 并尝试使用它创建这个项目，但在调用自定义钩子以使用商店时一直遇到错误：

'属性'useStore' 不存在于类型 '() => { Provider: ({ initialValue, children }: { initialValue?: {}; children: any; }) => Element; useStore: () => any;}' ts(2339)

我在普通的反应中测试了它并且它正在工作，所以它是 Typescript 的类型或属性定义问题。

创建通用存储（没有打字稿错误）：

interface IState {}

const initialState: IState = {}

export default function newStore() {
  const context = React.createContext<IState>(initialState)

  const Provider = ({ initialValue = {}, children }): JSX.Element => {
    const [state, setState] = useState(initialValue)
    const contextValue = useMemo(() => [state, setState], [state])

    return <context.Provider value={contextValue}>{children}</context.Provider>
  }
  const useStore = () => useContext(context)

  return { Provider, useStore }
}

Store Action Hooks（两个 useStore 实例都显示错误）：

import store from "./makeStore";

export const useGalleryOpen = () => {
  const [{ galleryOpen }] = store.useStore()
  return galleryOpen
}

export const useGalleryToggle = () => {
  const [_, setState] = store.useStore()
  return () =>
    setState(prev => ({
      ...prev,
      galleryOpen: !prev.galleryOpen,
    }))
}

非常感谢任何建议。

Answer 1

问题的关键点（它在您的代码沙箱中可见，我已经编辑了您的问题以包含它）是store定义。

您将商店定义为import store from "./makeStore";

所以store是一个函数，当被调用时，它返回一个包含

{
  Provider: any;
  useStore(): any;
}

当您使用store.useStore()使用它时，您就犯了错误。 store是一个函数，它的返回值是一个包含useStore函数的对象。

一切顺利更换

store.useStore()

和

store().useStore()

如果您需要更多帮助，请告诉我😊