TypeScript中如何为对象键声明多值选项？解决计算属性名报错

你遇到的报错原因很明确：TypeScript不允许在类型字面量的计算属性名中直接使用联合类型（比如'color' | 'background'），计算属性名必须是单个字面量类型或唯一符号，所以单个[color]能正常工作，但联合类型写法会触发错误。

下面是两种正确的实现方式，既能满足多键的类型约束，又能保留编辑器的代码提示：

方式1：直接枚举可选键 #

直接在对象类型中列出所有允许的键，每个键对应相同的类型：

const addCSS = (ele: HTMLElement, obj: { color?: string | number; background?: string | number }) => {
    Object.entries(obj).forEach(([prop, value]) => {
        // 类型断言：确保prop是CSSStyleDeclaration的合法属性
        ele.style[prop as keyof CSSStyleDeclaration] = value as string;
    });
};

这种写法直观，编辑器会自动提示color和background两个可选键，适合键数量较少的场景。

方式2：使用映射类型（推荐） #

先定义一个包含所有目标键的联合类型，再通过映射类型生成对象类型，扩展性更强：

// 定义允许的CSS属性键联合类型
type AllowedCSSProps = 'color' | 'background';

const addCSS = (ele: HTMLElement, obj: { [K in AllowedCSSProps]?: string | number }) => {
    Object.entries(obj).forEach(([prop, value]) => {
        // 类型断言：确保prop属于预定义的合法键
        ele.style[prop as AllowedCSSProps] = value as string;
    });
};

这种方式的优势在于，如果后续需要新增允许的键，只需要修改AllowedCSSProps联合类型即可，无需改动对象类型定义。

补充说明 #

关于Object.entries的类型适配：TypeScript中Object.entries()返回的键类型默认是string，而ele.style的键是CSSStyleDeclaration的属性，所以需要通过类型断言（as）来告诉编译器键的合法性；同时DOM样式的属性值最终是字符串类型，所以把number类型的值断言为string是安全的（数字会被自动转换为带单位的字符串，比如100转成"100px"）。

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