Reactjs 如何定义React操作挂钩存储的Typescript属性和类型

在Tanner Linsley描述的“动作挂钩模式”之后，我正在使用挂钩创建一个react状态管理存储

我正在学习Typescript，并尝试使用它创建此项目，但在调用自定义挂钩以使用存储时一直遇到错误：

类型“（）=>{Provider:（{initialValue，children}:{initialValue？：{}；children:any；}）=>元素；useStore:（）=>any；}”ts（2339）上不存在属性“useStore”

我在PlainReact中测试了它，它正在工作，因此Typescript存在类型或属性定义问题

已创建通用存储（无类型脚本错误）：

---

非常感谢您的建议。

问题的关键点（它在您的代码沙盒中可见，我已经编辑了您的问题以将其包括在内）是

存储

定义

您将存储定义为

从“/makeStore”导入存储

因此，
store
是一个函数，当调用它时，它返回一个包含

{
供应商：任何；
useStore（）：任何；
}

当您使用
store.useStore（）
消费它时，您犯了错误
store
是一个函数，返回值是包含
useStore
函数的对象

一切顺利

store.useStore（）

与

store（）.useStore（））

如果您需要更多帮助，请告诉我。我已尝试使用我暂时放置的接口显式定义Provider和useStore以进行测试，例如，
接口IStore{Provider:any useStore（）：any}newStore（）：IStore{…
，但useStore返回一个错误，
属性“useStore”在类型“（）=>IStore'
我没有正确定义useStore函数吗？您在代码中使用了
store.useStore（）
，但是
store
声明在哪里？我希望看到它的类型I导入store from./makeStore。代码片段是独立的组件。因此在上述情况下
函数store（）：IStore
我想我在IStore中声明了useStore..hmm？我已经用解决方案更新了我的答案
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 }
}

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,
    }))
}