TypeScriptでコーディングする際、変更内容を確認するために毎回ターミナルにtscと入力していませんか？
もしそうなら、今日のこの記事を読んだ後、あなたは全く新しい世界に出会うでしょう！ 😉
1. –watchフラグとは何ですか？ 🤔
基本的にtscコマンドを実行すると、TypeScriptコンパイラはプロジェクト内のソースファイルを一度スキャンしてJavaScriptファイルに変換した後、終了します。
しかし、–watch（または短縮形の-w）フラグを付けると状況が変わります。
- 継続的な監視: コンパイラは終了せず、プロセスを維持します。
- ファイル変更の検出: プロジェクト内のファイルが保存(Save)される瞬間をリアルタイムで検出します。
- 増分コンパイル: 変更された部分だけを素早く再コンパイルし、結果を更新します。
2. なぜ–watchを使用すべきですか？ ✨
この機能を使用することで得られる利点は明確です。
- 開発速度の向上(DX): 「コード修正 → 保存 → ターミナル移動 → tsc入力 → 結果確認」という反復的なプロセスから中間段階がなくなります。
- リアルタイムエラーフィードバック: コードを記述するとすぐに、構文エラーや型エラーがターミナルに直接表示されます。まるでリアルタイムのスペルチェッカーのようです！ ✍️
- 効率的なリソース使用: すべてのファイルを最初から読み直すのではなく、変更された部分と関連するファイルのみを処理するため、大規模プロジェクトでははるかに高速です。
3. どのように使用しますか？ 🛠️
使い方は非常に簡単です。ターミナルに次のように入力してみてください。
# 特定のファイル一つだけを監視する場合
tsc index.ts --watch
# プロジェクト全体（tsconfig.json基準）を監視する場合
tsc --watchコマンドを実行すると、ターミナルに「Starting compilation in watch mode…」というメッセージが表示され、監視モードが開始されます。これで、エディタ（VS Codeなど）でコードを修正し、Ctrl + Sを押すたびに自動的にコンパイルが実行されます。 ✅
4. tsconfig.jsonと組み合わせて使用する ⚙️
通常、実際のプロジェクトでは設定ファイルであるtsconfig.jsonを使用します。このとき、watchOptionsという設定を通じて、より細かく制御できます。
{
"compilerOptions": {
"outDir": "./dist",
"rootDir": "./src"
},
"watchOptions": {
"watchFile": "useFsEvents", // ファイル監視方法の設定
"watchDirectory": "useFsEvents", // ディレクトリ監視方法の設定
"fallbackPolling": "dynamicPriority" // システムリソース不足時のポーリング方式
}
}ヒント: ほとんどの場合、デフォルト設定だけでも十分にうまく機能します！
5. 実践的なヒント: Nodemonとの組み合わせ 🍯
tsc –watchはJavaScriptファイルを生成するだけで、ファイルを自動的に実行はしません。このとき、nodemonやts-node-devのようなツールを一緒に使用すると、「コード修正 → コンパイル → サーバー再起動」が一度に起こる魔法を体験できます。
推奨ワークフロー:
>
1. 一つのターミナルウィンドウでtsc –watchを起動しておきます。
2. 別のターミナルウィンドウで、生成されたdist/index.jsを実行するnodemonを起動します。
6. 終わりに 🏁
–watchフラグは単なるオプションではなく、TypeScript開発者の生産性を決定づける重要なツールです。まだ使用したことがない場合は、今日すぐにターミナルに-wの一文字を追加してみてください。あなたの開発体験がはるかに快適になるでしょう！ 😊
コメントを残す