React+TypeScript：如何为handleChange的value参数添加类型约束？

我定义了如下TypeScript接口：

interface MyType {
   name: string
   age: number
   friend: Person
}

并声明了对应的React状态：

const [myState, setMyState] = useState<MyType>({.....})

同时编写了用于修改该状态字段的函数：

const handleChange = (field: keyof MyType, value: unknown) => {
   setMyState({
      ...myState,
      [field]: value
   })
}

请问如何通过泛型或其他方案为上述函数的value参数添加类型约束，使得传入错误类型的值（例如执行handleChange("name", 5);）时，TypeScript能抛出类型错误？

给handleChange函数添加泛型约束，就能让value的类型和传入的field字段在MyType中的类型自动关联，实现精准的类型校验。具体写法如下：

const handleChange = <K extends keyof MyType>(field: K, value: MyType[K]) => {
  setMyState({
    ...myState,
    [field]: value
  });
};

原理说明 #

• 泛型K被约束为keyof MyType，意味着它只能取MyType接口中存在的键名（name/age/friend）；
• value的类型指定为MyType[K]，即当你传入某个具体的field时，value必须严格匹配该字段在MyType中定义的类型：
  • 传"name"时，value必须是string类型；
  • 传"age"时，value必须是number类型；
  • 传"friend"时，value必须是Person类型。

效果验证 #

• 错误示例：handleChange("name", 5); —— TypeScript会直接抛出类型错误，提示number类型无法赋值给string类型；
• 正确示例：handleChange("name", "Alice");、handleChange("age", 25); —— 类型检查完全通过。

可选优化 #

如果想避免闭包导致的旧状态依赖问题，可以改用函数式更新，确保每次更新都基于最新状态：

const handleChange = <K extends keyof MyType>(field: K, value: MyType[K]) => {
  setMyState(prevState => ({
    ...prevState,
    [field]: value
  }));
};

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