TypeScript中如何让函数参数value与动态传入的key类型始终匹配

核心实现思路 #

通过泛型约束绑定参数key与value的类型关系，让TypeScript自动根据传入的属性名，推断该属性允许的取值类型，不符合类型的传参会直接触发类型报错。

优化后的代码 #

// interface 
interface Frequency {
  frequency: "daily" | "monthly";
  sendHour: number;
  sendMinutes: number;
  sendDay: number;
  delayStart: boolean;
}

// react state
const [frequency, setFrequency] = useState<Frequency>({
  frequency: "daily",
  sendHour: 1,
  sendMinutes: 1,
  sendDay: 1,
  delayStart: false,
});

// 类型安全的updater
const onChangeFrequency = <K extends keyof Frequency>(
  key: K,
  value: Frequency[K]
) => {
  setFrequency((prev) => ({
    ...prev,
    [key]: value,
  }));
};

效果验证 #

• 当传入key为delayStart时，value只能传入boolean类型，传入数字/字符串都会触发类型错误
• 当传入key为frequency时，value只能传入"daily"或"monthly"两个枚举值
• 所有属性的更新都会严格匹配Frequency接口定义的类型，完全规避类型不匹配的漏洞

通用封装方案（可选） #

如果项目中有多个类似的状态需要更新，可以封装通用的类型，减少重复代码：

// 通用状态更新函数类型定义
type StateUpdater<T> = <K extends keyof T>(key: K, value: T[K]) => void;

// 针对Frequency类型的使用
const onChangeFrequency: StateUpdater<Frequency> = (key, value) => {
  setFrequency(prev => ({ ...prev, [key]: value }));
};

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