React全局上下文JS转TS时遇ProviderProps缺value的TS报错求助

错误原因分析 #

• GlobalDispatchContext.Provider缺少value属性：创建GlobalDispatchContext时指定了初始类型{}，TypeScript要求Provider必须传入匹配该类型的value，但原代码未传值。
• 过度依赖any类型：reducer参数、组件props都用any，完全浪费了TypeScript的类型校验能力，也会埋下潜在bug。

修复步骤 #

1. 补全GlobalDispatchContext.Provider的value参数

在组件返回的JSX中，给GlobalDispatchContext.Provider传入dispatch值（这个Context的作用就是分发状态更新动作）：

<GlobalDispatchContext.Provider value={dispatch}>
  {children}
</GlobalDispatchContext.Provider>

2. 定义严格类型替换所有any

为全局状态、动作、dispatch函数定义明确的TypeScript类型，让校验真正生效：

import React, { useReducer, Dispatch } from "react"

// 定义全局状态的类型，限定partner的可选值
type GlobalState = {
  partner: "none" | "active"
}

// 定义状态更新动作的类型，限定合法的动作类型
type GlobalAction = {
  type: "TOGGLE_PARTNER"
}

// 初始化状态，指定为GlobalState类型
const initialState: GlobalState = {
  partner: "none",
}

// 给reducer指定明确的参数和返回值类型
function reducer(state: GlobalState, action: GlobalAction): GlobalState {
  switch (action.type) {
    case "TOGGLE_PARTNER": {
      return {
        ...state,
        partner: state.partner === "none" ? "active" : "none",
      }
    }
    default:
      throw new Error("Bad Action Type")
  }
}

// 为Context指定准确的类型，初始值用合法的默认值
export const GlobalStateContext = React.createContext<GlobalState>(initialState)
// Dispatch<GlobalAction>是React内置类型，用来定义dispatch函数的类型
export const GlobalDispatchContext = React.createContext<Dispatch<GlobalAction>>(() => {})

// 定义组件props的类型，children用React.ReactNode更准确
type GlobalContextProviderProps = {
  children: React.ReactNode
}

const GlobalContextProvider = ({ children }: GlobalContextProviderProps) => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <GlobalStateContext.Provider value={state}>
      <GlobalDispatchContext.Provider value={dispatch}>
        {children}
      </GlobalDispatchContext.Provider>
    </GlobalStateContext.Provider>
  )
}

export default GlobalContextProvider

关键说明 #

• GlobalState限定了partner的取值范围，避免传入非法字符串。
• GlobalAction约束了合法的动作类型，防止拼写错误或无效动作触发reducer。
• Dispatch<GlobalAction>确保dispatch函数只能分发符合规则的动作，从源头避免错误。
• 用React.ReactNode定义children类型，比any更贴合React的实际渲染规则。

修改后所有类型错误会自动消失，同时完全保留TypeScript的严格校验能力，无需关闭严格模式。

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