classnamesライブラリをより型安全に利用する

はじめに

classnamesは、ReactでCSSモジュールを使用するときに広く使用されています。
そのまま使用すると、指定したキーはタイプセーフではなく、少し心配になるかもしれません。
より安全に使用するための手段をご紹介します。
ここで紹介する手段は、classnames-genericsで公開されています。

例えば、

headerとactiveクラスをheaderタグに割り当てる状況があるとします。

classnamesライブラリを利用した場合

import {classNames} from 'classnames'

const headerClass = classNames('header', 'active');

このように利用しますが、typoがあったり別のクラスを指定したりしても、型エラーは出力されません。

classnames-genericsライブラリを利用した場合

import {classNames} from 'classnames-generics'

const headerClass = classNames<'header' | 'active'>('header', 'active');

このようにLiteral Typeを使用することで、より安全に使用できます。

よく使うクラスは次のように使うこともできます。

import {classNamesFunc} from 'classnames-generics'

const classNames = classNamesFunc<'header' | 'active'>();
const headerClass = classNames('header', 'active');