如何在createContext中为TypeScript初始化useState的set函数？

Question

我有一个Provider，它通过两个contexts 提供一个状态变量及其对应的setter。

const BookedBatchContext = createContext({})
const SetBookedBatchContext = createContext(null)

const initialState = {
  id: null
}

Provider 看起来像这样：

export const BookedBatchProvider = ({ children }: { children: any }) => {
  const [bookedBatch, setBookedBatch] = useState(localState ||initialState)

  return (
    <SetBookedBatchContext.Provider value={setBookedBatch}>
      <BookedBatchContext.Provider value={bookedBatch}>
        { children }
      </BookedBatchContext.Provider>
    </SetBookedBatchContext.Provider>
  )
}

通过自定义钩子，我使 setBookedBatch 可用于其他组件：

export const useBookedBatch = () => {
  const bookedBatch = useContext(BookedBatchContext)
  const setBookedBatch = useContext(SetBookedBatchContext)

  return { bookedBatch, setBookedBatch }
}

当尝试使用 setBookedBatch 函数时，我在给定组件中收到以下错误：

setBookedBatch(selectedBatch)

错误：

TS2721: Cannot invoke an object which is possibly 'null'.

由于useState函数的setter是我没有创建的函数，所以创建上下文的时候不知道怎么初始化：

const SetBookedBatchContext = createContext(null)

这样 TypeScript 就不会抱怨了。

1. 如何知道setter函数的初始值？
2. 如果我不提供任何类型，如何避免 TS 抱怨 null 值？

Answer 1

React.createContext 和 React.useState 的返回类型由您传入的初始值推断确定。

1.) 您可以通过手动指定泛型类型来创建正确的上下文类型：

const SetBookedBatchContext = createContext<null | React.Dispatch<React.SetStateAction<State>>>(null)

注意：useState 的 setter 类型为 React.Dispatch<React.SetStateAction<State>>，其中 State 是 localState || initialState 的任何类型。

2.) 在您的自定义 Hook useBookedBatch 中断言，setBookedBatch 不是 null：

export const useBookedBatch = () => {
  const bookedBatch = useContext(BookedBatchContext)
  const setBookedBatch = useContext(SetBookedBatchContext)
  if (setBookedBatch === null) throw new Error() // this will make setBookedBatch non-null
  return { bookedBatch, setBookedBatch }
  // returns: { bookedBatch: {}; setBookedBatch: React.Dispatch<React.SetStateAction<State>>; }
}

3.) 然后setBookedBatch 可以在以后调用而无需断言：

const App = () => {
  const { setBookedBatch } = useBookedBatch()
  useEffect(() => { setBookedBatch({ id: "foo" }) }, [])
}

Sample on the playground