如何在TypeScript中实现Interface键与对应值类型的关联匹配——React组件函数类型约束问题咨询

我来帮你搞定这个类型约束的问题，这其实是TypeScript泛型约束的典型场景，只需要给函数加上正确的泛型定义，就能实现键与值类型自动匹配的效果。

正确实现方案 #

直接修改你的onChangeSystemData函数，通过泛型约束让key和value的类型严格绑定：

function TitleBarContainer() {
  const systemData = useSelector((state: RootState) => state.counter.systemData)
  const dispatch = useDispatch()
  const onChangeSystemData = useCallback(<K extends keyof SystemState>(
    key: K,
    value: SystemState[K]
  ) => {
    // 用扩展运算符复制对象比Object.assign更简洁直观
    const tempSystemData = { ...systemData };
    tempSystemData[key] = value;
    dispatch(changeSystemData(tempSystemData));
  }, [dispatch, systemData]);
}

代码解释 #

• 泛型K extends keyof SystemState：限制key只能是SystemState接口中定义的属性名（比如'title'、'windowState'）。
• value: SystemState[K]：让value的类型严格对应SystemState中K键的属性类型——当你传入key='windowState'时，TypeScript会自动推断K为'windowState'，进而要求value必须是WindowStateType类型，完全符合你的需求。

你之前尝试的问题分析 #

你之前的泛型写法存在两个核心问题：

1. 泛型声明位置错误：在React的useCallback外部直接声明泛型的方式不正确，需要在回调函数内部用箭头函数的泛型语法声明。
2. 类型关联失效：你定义的InternalState<T>接口虽然思路方向对，但T[keyof T]会直接返回所有属性类型的联合类型，无法实现键与值的一一绑定。

额外说明 #

你的system.d.ts类型定义不需要做任何修改，原来的SystemState和各个子类型已经足够支撑这个实现。

修改完成后，当你调用onChangeSystemData('windowState', 'minimize')时TypeScript会正常通过；但如果传入onChangeSystemData('windowState', 'admin')，TypeScript会立刻抛出类型错误，因为'admin'不属于WindowStateType，完美实现了类型约束的目的。

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