使用React.useContext()时无法强制函数参数接口的TypeScript问题

问题根源 #

你的代码中，InitialStateInterface 里将 handleSettingFooBar 定义为了 Function 类型——这是TypeScript中最宽泛的无类型函数声明，编译器无法从中推断出函数的参数结构和返回值类型，因此在组件调用时不会进行任何参数校验。

修复步骤 #

1. 替换宽泛的Function类型为具体的函数签名

修改 InitialStateInterface，明确指定函数的参数类型和返回值类型：

interface InitialStateInterface {
    // 替换原有的Function类型为具体的函数签名
    handleSettingFooBar: (data: PayloadInterface) => void;
    foo: string | null;
    bar: boolean;
}

2. 优化初始状态的默认函数实现（可选，增强严谨性）

将 initialState 中的默认函数调整为符合类型定义的实现：

const initialState: InitialStateInterface = {
    handleSettingFooBar: (data: PayloadInterface) => {},
    foo: null,
    bar: false,
};

3. 验证修复效果

此时在 SomeComponent 中调用 handleSettingFooBar({ randomKey: 'hahaha' })，TypeScript编译器会直接抛出错误：

对象字面量只能指定已知属性，而“randomKey”不在类型“PayloadInterface”中

完全符合你期望的编译阶段参数校验要求。

额外说明 #

你之前尝试在 useContext 调用时手动指定类型是多余的——因为 SomeContext 已经通过 React.createContext<InitialStateInterface>(initialState) 明确了上下文类型，useContext 会自动推断出返回值类型，无需重复声明。

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