使用keyof typeof处理React对象状态：如何指定toggle函数的key类型？

你遇到的问题是因为TypeScript对对象索引的类型检查比较严格，直接用string类型作为索引时，范围远大于actives对象实际拥有的键，所以会报错。正确的类型设置有两种方案：

方案1：使用字面量联合类型 #

直接限定key只能是actives对象已有的键值：

const toggle = (key: 'active1' | 'active2') => setActives((actives) => ({ ...actives, [key]: !actives[key] }));

方案2：动态提取键类型 #

如果后续可能给actives添加更多属性，用keyof typeof actives可以自动获取对象所有键的类型，更灵活：

const toggle = (key: keyof typeof actives) => setActives((actives) => ({ ...actives, [key]: !actives[key] }));

这两种方式都能让TypeScript确认key是actives对象的合法键，避免索引错误。

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