如何让React Context Provider具备类型安全性？TS重构报错求助

修复后的完整代码 #

import { createContext, FC, PropsWithChildren, useState } from 'react'
import { Action, ActionCreator } from 'redux'
import { Dispatch, SetStateAction } from "react";

type ModalStateT = {
  action: ActionCreator<any> | undefined
  args: Action | undefined
}

type ModalContextT = {
  modalState: ModalStateT
  setModalState: Dispatch<SetStateAction<ModalStateT>>
  resetModalState: () => void
}

export const ModalContext = createContext<ModalContextT | undefined>(undefined)

const ModalProvider: FC<PropsWithChildren> = ({ children }) => {
  // 显式指定useState的泛型类型为ModalStateT
  const [modalState, setModalState] = useState<ModalStateT>({
    action: undefined,
    args: undefined,
  })

  const resetModalState = () => {
    setModalState({
      action: undefined,
      args: undefined,
    })
  }

  return (
    <ModalContext.Provider value={{ modalState, setModalState, resetModalState }}>
      { children }
    </ModalContext.Provider>
  )
}

export default ModalProvider

问题根源与修复说明 #

1. useState类型推断过窄
   原代码中defaultState被TypeScript自动推断为{ action: undefined; args: undefined }，这是一个比ModalStateT更严格的类型（仅允许undefined值），导致setModalState的类型和ModalContextT中定义的Dispatch<SetStateAction<ModalStateT>>不兼容。

   • 修复：给useState显式指定ModalStateT泛型，强制TS识别正确的状态类型，也可以通过给defaultState添加ModalStateT类型标注实现相同效果。

2. resetModalState类型不匹配
   原ModalContextT中定义resetModalState接受ModalStateT类型参数，但实际实现中它不需要参数，直接重置为默认状态，类型定义与实际逻辑不符。

   • 修复：将ModalContextT中的resetModalState类型改为() => void，与实际实现保持一致；若后续需要支持自定义重置状态，再调整类型和实现即可。

内容的提问来源于stack exchange，提问作者Neil Girardi