🐕

Vite x React x CSS Modules環境で、vite-plugin-sass-dtsを利用して型安全に生活する

1 min read

はじめに

前回までの記事で、classnames-genericsを利用して、型安全にTypeScriptでstyleを実装する方法を紹介してきました。

続の方で締めくくっているように、styleの型定義を自前で用意するのが非常に面倒でした。今回は、自動でstyleの型定義ファイルを作成するvite-plugin-sass-dtsを紹介します。

準備

vite-plugin-sass-dts をインストールする
npm i -D vite-plugin-sass-dts

vite.config.tsにプラグインを設定する

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";

export default defineConfig({
  plugins: [react(), sassDts()],
});

コンポーネントの実装

vite を起動する
npm run dev
scss ファイルを実装して、保存する
header/index.module.scss
.header {
  background-color: red;
  .active {
    background-color: black;
  }
}
保存した scss ファイルと同じディレクトリに型定義ファイルが自動で作成される
header/index.module.scss.d.ts
export const header = 'header'
export const active = 'active'

export type ClassNames = 'header' | 'active'
型定義を利用してコンポーネントを実装する
header/index.tsx
import React, {VFC} from 'react';
import styles, {ClassNames} from './index.module.scss'
import {classNamesFunc} from 'classnames-generics'

const classNames = classNamesFunc<ClassNames>();
type Props = {
  active: boolean;
}

export const Header: VFC = (props) => {
  return (
    <header 
      className={classNames(styles.header, {[styles.active]: props.active})}>
      続)classnamesライブラリをより型安全に利用する
    </header>
  )
}

補完もきちんと効くようになっているので、開発速度の向上が期待できます。

Discussion

ログインするとコメントできます