ViteでTypescriptの型チェックをする方法

概要

Viteというビルドツールの紹介と型チェックを導入する手順の説明です。
(2022年6月6日段階では最新はv2.9.9です)

Viteは .ts ファイルのインポートをサポートしていますが、ファイルのトランスパイルだけを行い、型のチェックは行いません。
Viteでの型チェックは、IDEやビルド時に行われることを前提としています。
これはとても不便ですし、しっかりエラーが出ないとTypescriptのメリットが薄れてしまいます。

そこで困っている人にvite-plugin-checkerとライブラリがおすすめです。
これを使えばViteでもリアルタイムで型チェックをしてくれますし、Vite自体も従来のビルドツールに比べて、高速で動作するので鬼に金棒です。

Viteで型チェック導入

まずはライブラリを導入します。

yarn add vite-plugin-checker -D

vite.config.tsにコードを記述します。

import checker from 'vite-plugin-checker';

export default defineConfig({
    plugins: [checker({ typescript: true })],
});

これだけでリアルタイムの型チェックを行ってくれます。
とても便利なのでViteとTypescriptを使いたい人は導入しない手はないでしょう。