かめ。ブログ

Typescriptでkeyof CSSStyleDeclarationをケバブケースも合わせて対応する

2022年4月6日
2022年4月9日

目次

Typescriptでcssのプロパティの文字列を型として定義したい場合に
CSSStyleDeclarationではキャメルケースのみのようなので、
「keyof CSSStyleDeclaration」を使ってケバブケースも合わせて対応する方法メモです。

ケバブケースについて

ケバブケースとはよくCSSで使われているようなハイフン（-）つなぎでワードごとの区切りを表す記述方法です。

それぞれのケースの例

// キャメルケース
backgroundColor
// ケバブケース
background-color


ケバブケースへの変換について

下記参考にさせていただきました。
TypeScriptでスネークケース🐍←→キャメルケース🐪に変換する型を定義する。理解する。

コードの細かい部分の説明については上記サイトで詳しく説明されているのでそちらを見ていただければと思います。
上記はスネークケースからの変換なのですが、少し手を加えさせていただいておりますm

実際のコード

type CamelToKebabCase<S extends string> =
  S extends `${infer T}${infer U}` ?
  `${T extends Capitalize<T> ? "-" : ""}${Lowercase<T>}${CamelToKebabCase<U>}` : S

export type CamelToKebab<T extends object> = {
  [K in keyof T as `${CamelToKebabCase<string & K>}`]: T[K] extends object ? CamelToKebab<T[K]> : T[K]
}

export type CSSStyleDeclarationName = (keyof CSSStyleDeclaration | keyof CamelToKebab<CSSStyleDeclaration>) & string


こちらを使用することでCSSStyleDeclaration + ケバブケースを含めたcss プロパティの文字列を指定することができます。
実際にプラグインを制作する際に厳密なcssプロパティの文字列の型にしたいなと思い作りました。
実際に使用しているコードは下記になります。
https://github.com/kamem/scroll-parallax-effect/blob/master/src/scroll-parallax-effect/utils/util.ts

まとめ

他にもう少し良いやり方があればよいなぁとは思っているのですが、見つからなかったので
この方法で対応することにしました。

これで厳密にcssプロパティのみを定義することができてプラグインとしてちゃんとした感じが出せたのでよかったです。
このプラグインも年々リファクタを重ねてきているのですが、まだまだ改善したいところ満載な部分もあるので日々リファクタを重ねたり
綺麗なコードを保つようにしていきたいです。

目次