TypeScript编写DOM样式函数时CSSStyleDeclaration报错无自动补全

初始实现代码 #

function css(element: HTMLElement, designs: Record<CSSStyleDeclaration, string>): void {
    for (let design in designs) {
        element.style[design] = designs[design]
    }
}

预期效果 #

调用函数传入样式配置时，输入属性名可获得编辑器自动补全提示：例如输入backg开头的内容时，和VSCode原生提示一致展示所有匹配的CSS属性（如所有background相关属性），调用示例：

css(someElement, {
  backg...: 'red' // 期望触发前缀匹配的CSS属性提示
})

现存问题 #

TypeScript抛出类型错误：Type 'CSSStyleDeclaration' does not satisfy the constraint 'string | number | symbol'。该错误不影响代码运行，但会导致CSS属性名自动补全功能失效。

错误原因 #

Record<K, V>工具类型要求第一个泛型参数K必须是可作为对象键的类型，即满足string | number | symbol约束。原代码直接传入CSSStyleDeclaration作为K的参数，本质是把整个样式声明接口类型当作键类型使用，不符合类型约束，因此无法触发属性提示。

修复后代码 #

基础版本（仅支持JS驼峰格式的CSS属性）：

function css(element: HTMLElement, designs: Partial<Record<keyof CSSStyleDeclaration, string>>): void {
    for (const design in designs) {
        if (Object.hasOwn(designs, design)) {
            element.style[design as keyof CSSStyleDeclaration] = designs[design as keyof CSSStyleDeclaration]
        }
    }
}

扩展版本（兼容--xxx格式的CSS自定义属性）：

function css(element: HTMLElement, designs: Partial<Record<keyof CSSStyleDeclaration | `--${string}`, string>>): void {
    for (const design in designs) {
        if (Object.hasOwn(designs, design)) {
            element.style.setProperty(design, designs[design as keyof typeof designs]!)
        }
    }
}

修复说明 #

• 使用keyof CSSStyleDeclaration获取所有内置CSS属性对应的JS驼峰命名联合类型（如backgroundColor、display、flex等），编辑器会基于该联合类型做前缀匹配，输入属性片段时自动弹出匹配项。
• 外层包裹Partial是因为实际使用时不需要传入全部CSS属性，仅需传入需要修改的部分属性即可，符合工具函数的使用场景。
• 增加Object.hasOwn判断是为了避免遍历到原型链上的继承属性，赋值逻辑更严谨。
• 扩展版本用style.setProperty做赋值，兼容短横线格式的原生CSS属性名和自定义变量写法。

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