如何在TypeScript中使用连字符格式的合法CSS属性名类型？

我在组件中定义了一个接收合法CSS属性数组的props：

interface MyComponentProps {
    cssProperties: (keyof CSSStyleDeclaration)[];
}

const MyComponent = ({ cssProperties }: MyComponentProps) => {
    //
}

问题在于CSSStyleDeclaration存储的样式属性名是驼峰格式，而我需要原始的连字符格式CSS属性，比如background-color而非backgroundColor。我知道React.CSSProperties类型同样使用驼峰格式，只是允许无单位数值。请问是否存在对应原始连字符格式CSS属性名的TypeScript类型？

TypeScript标准库本身没有直接提供连字符格式的CSS属性名类型，但可以通过模板字面量类型自行生成，实现步骤如下：

1. 定义驼峰转连字符的类型转换器 #

利用TypeScript的模板字面量递归能力，把驼峰字符串转为连字符格式：

type CamelToKebab<S extends string> = S extends `${infer P}${infer R}`
  ? `${P extends Uppercase<P> ? '-' : ''}${Lowercase<P>}${CamelToKebab<R>}`
  : S;

2. 生成连字符格式的CSS属性类型 #

基于CSSStyleDeclaration的键名，通过转换器生成目标类型：

type KebabCSSProperties = CamelToKebab<keyof CSSStyleDeclaration>;

3. 改造组件Props #

将原props的类型替换为生成的连字符属性类型：

interface MyComponentProps {
    cssProperties: KebabCSSProperties[];
}

const MyComponent = ({ cssProperties }: MyComponentProps) => {
    // 示例使用：遍历连字符格式的属性名
    cssProperties.forEach(prop => {
        console.log(prop); // 输出如 "background-color" "border-top-left-radius"
    });
}

可选优化：过滤非标准属性 #

CSSStyleDeclaration包含一些非CSS属性的键（如length、parentRule），可以用Exclude过滤掉：

type KebabCSSProperties = Exclude<CamelToKebab<keyof CSSStyleDeclaration>, 'length' | 'parentRule'>;

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