TypeScript如何提取对象键类型？对象属性更新报错求助

场景代码 #

用于存储颜色值的对象：

const cardColors = {
  primaryGradientColor: "",
  secondaryGradientColor: "",
  titleTextColor: "",
  borderColor: "",
  categoryTextColor: "",
};

尝试编写的属性更新函数：

const updateColor = (colorType: typeof cardColors, color: string) => {
  cardColors[colorType] = color;
}

报错信息 #

Type '{ primaryGradientColor: string; secondaryGradientColor: string; titleTextColor: string; borderColor: string; categoryTextColor: string; }' cannot be used as an index type.

需求 #

希望直接通过cardColors对象作为函数参数的类型来源，避免单独定义类型导致的冗余维护。

解决方案 #

错误原因是typeof cardColors代表的是整个对象的类型，而对象索引需要的是属性名的联合类型。用keyof typeof cardColors可以获取cardColors所有属性名的联合类型，修改后的函数如下：

const updateColor = (colorType: keyof typeof cardColors, color: string) => {
  cardColors[colorType] = color;
}

keyof typeof cardColors会自动生成"primaryGradientColor" | "secondaryGradientColor" | "titleTextColor" | "borderColor" | "categoryTextColor"这个联合类型，这样colorType参数只能传入对象的合法属性名，既符合TypeScript的类型校验要求，又能在cardColors属性变更时自动同步类型，无需额外维护类型定义。

内容的提问来源于stack exchange，提问作者Raj Rohit Yadav