使用useReducer+useContext做状态管理时无法访问context对象属性

你遇到的是TypeScript类型推断问题，原因是创建GlobalContext时传入的默认值是空对象{}，TypeScript自动将该Context的类型推断为{}，所以即便运行时Provider传递的value包含对应属性，静态类型校验阶段也会判定authDispatch等属性不存在。

解决步骤 #

1. 定义Context值的完整类型
   在Provider.tsx文件中，基于你已有的reducer和初始状态定义接口：

interface IGlobalContextValue {
  // 可直接用现有初始状态推导类型，也可替换为你手动声明的状态接口
  authState: typeof authInitialState;
  authDispatch: React.Dispatch<React.ReducerAction<typeof auth>>;
  messageState: typeof todaysMessageInitialState;
  messageDispatch: React.Dispatch<React.ReducerAction<typeof todaysMessage>>;
}

2. 创建Context时显式指定泛型
   由于你已经用GlobalProvider包裹了整个应用，Context默认值不会实际生效，可以用类型断言给空对象标记类型，修改原createContext行：

export const GlobalContext = createContext<IGlobalContextValue>({} as IGlobalContextValue);

修改完成后，再解构或者用点语法访问context属性时，TypeScript即可正确识别类型，不会再报错。

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