typed-css-modulesを使用して型定義ファイルを作成する

この記事の目的

typed-css-modulesをインストールし、*.module.css.d.tsファイルが自動作成されるようにする。

はじめに

ReactにはCSS modulesという機能があり、これを使用するとコンポーネントCSSファイルを1対1で紐付けられるようになります。例えば、

export function Sample() {
  return <div>
    <h1>hello, world</h1>
  </div>
}

このようなコンポーネントに対して、Sample.module.cssというファイルを作成すると、コンポーネント側ではimport classes from "Sample.module.css"とすることでコンポーネントのスタイル指定をclassName={classes.container}などといったようにできるようになります。

本題

はじめにで述べたように、モジュールとスタイルシートを1対1で紐づけることができます。そこからさらに一歩進んで、TypeScriptの型定義ファイルにスタイルのクラスを定義できるようにします。

typed-css-modulesをインポート

まずは必要となるtyped-css-modulesをインポートします。

npm install -g typed-css-modules

次に、インストールしたtyped-css-modulesのコマンドを実行し、*.module.cssファイルに対する型定義ファイルを作成します。

tcm src

上記のsrc*module.cssファイルが存在するディレクトリを指定します。

ここまでできると、*module.cssファイルと同じディレクトリに*module.css.d.tsファイルが作成されているはずです。

終わりに

上記までの方法だと毎回tsm srcを実行しないといけないので、package.jsonのscriptsをうまいこと修正すればいいはず。