Reactjs 自定义上下文钩子类型脚本

基于这个有趣的方法，我正在尝试使用一个带有上下文API的定制钩子

当我将它与一个数字的简单状态一起使用时，我得到了一个错误，理想情况下，我会有一个更有意义的setter函数，但我只是在设置它时得到了错误

import * as React from 'react'

const mainState = () => {
  const [edit, setEdit] = React.useState<number | null>(null)

  return {
    edit,
    clear: () => setEdit(null)
  }
}

const MainContext = () => React.createContext<ReturnType<typeof mainState> | null>(null)

// I get an error on `MainContext`: `...is not assignable to parameter of type 'Context<unknown>`
export const useMainContext = () => React.useContext(MainContext)

export function MainProvider({children}: {children: React.ReactNode}){
  return (
    <MainContext.Provider value={mainState()}>
      {children}
    </MainContext.Provider>
  )
}

import*作为来自“React”的React
常量主状态=（）=>{
const[edit，setEdit]=React.useState（null）
返回{
编辑
清除：（）=>setEdit（空）
}
}
const MainContext=（）=>React.createContext（null）
//我在“MainContext”上遇到错误：“…不可分配给”Context类型的参数`
export const useMainContext=（）=>React.useContext（MainContext）
导出函数MainProvider（{children}:{children:React.ReactNode}）{
返回(
{儿童}
)
}

尝试传递值而不是声明函数：

const MainContext = React.createContext<ReturnType<typeof mainState> | null>(null)

const MainContext=React.createContext（null）

为什么不

MainContext=React.createContext

，为什么要传递一个函数？哦，我的天啊，我觉得太傻了，非常感谢