【TypeScript】ウォッチモードでコンパイルを自動化！tsc --watchの使い方と設定方法

ウォッチモードとは？

TypeScriptのウォッチモードとは、ファイルの変更を監視し、変更があった際に自動でコンパイルを実行する機能です。

通常、TypeScriptのコードをコンパイルするには以下のようにtscコマンドを実行する必要があります。

しかし、開発中にファイルを修正するたびにこのコマンドを手動で実行するのは面倒です。

そこで、tsc --watchを使うと、ファイルが変更されるたびに、自動コンパイルが実行されます。

TypeScriptのウォッチモードの使い方

tsconfig.json の作成

ウォッチモードを使用するためにtsconfig.jsonが必要です。

以下のコマンドを実行してtsconfig.jsonを作成しましょう。

上記のコマンドを実行するとプロジェクトフォルダにtsconfig.jsonという設定ファイルが生成されます。

本記事ではカスタマイズ方法の解説は省きますが、tsconfig.jsonを編集することで、コンパイルの挙動を細かくカスタマイズできます。

※デフォルトは、プロジェクト内の.tsファイルがすべてコンパイル対象になります。

tsconfig.jsonのカスタマイズのポイント

tsconfig.jsonを編集することで、以下のような設定が可能です。

ウォッチモードの実行

tsconfig.jsonを作成したら、以下のコマンドを実行してウォッチモードを開始できます。

このコマンドを実行すると、tsconfig.jsonの設定に従って.tsファイルが監視され、変更があるたびに自動でコンパイルされます。

ウォッチモードの解除方法

ターミナルでtsc --watchを実行している場合、以下のショートカットで解除できます。

ウォッチモードの活用例

nodemonと組み合わせる

nodemonを使うと、TypeScriptのコンパイルと同時にNode.jsの実行も自動化できます。

まず、以下コマンドを実行してnodemonをインストールします。

次に、ターミナルを2つ開きます。

1つ目のターミナルで以下コマンドを実行し、TypeScriptのコンパイルを監視します。

2つ目のターミナルで以下コマンドを実行し、.jsファイルを監視します。

※dist/index.jsは実行したいJavaScriptファイルに置き換える必要があります。

nodemonを使用することで、指定したJavaScriptファイルが変更されるたびに、自動で実行することができます。

まとめ

TypeScriptのウォッチモード(tsc --watch)を活用することで、ファイルを手動でコンパイルする手間を省き、開発をスムーズに進めることができます。

ウォッチモードを活用して、快適なTypeScript開発環境を構築しましょう！