どうも、ささおです。
今回は ts-node-dev をハンズオン形式でさらっと入門していきます。
Contents
ts-node-devとは？
ts-node-devはファイルの変更を検知すると自動でコンパイルして実行してくれる便利なやつです。
ts-nodeはファイルを変更したら、コンパイルと実行のコマンド（npx ts-node xxx.ts）を入力する必要がありましたが、
ts-node-devはファイルを変更したら自動でコンパイルして実行してくれます。
いわゆる ホットリロード という機能を提供してくれるわけですね。
TypeScriptファイルの作成
まずは今回作業用ディレクトリを作成してください。
ts-node-dev-practiceという名前のディレクトリを作成します。
以下のコマンドを実行してください。
|
1 |
$ mkdir ts-node-dev-practice |
次に、TypeScriptファイルを作成しましょう。
hello.ts という名前のファイルを作成し、
以下のコードを記述してください。
|
1 2 |
let message: string = 'Hello World'; console.log({ message }); |
これで準備完了です。
ts-node-devのインストール
やることは２つです。
- npm info ts-node-dev で最新版のバージョンを確認する
- npm install ts-node-dev@最新版 でインストールする
最新版を確認する
実行したいTypeScriptファイルのあるディレクトリ（ts-node-dev-practice）で、
以下のコマンドを実行してください。
|
1 |
$ npm info ts-node-dev |
するとこのように、表示されるはずです。
最新版をインストールする
実行したいTypeScriptファイルのあるディレクトリ（ts-node-dev-practice）で、
以下のコマンドを実行してください。
|
1 |
$ npm install --save-dev ts-node-dev@1.0.0-pre.44 |
執筆の時点（2020/３/２９）では1.0.0-pre.44が最新版なので、このコマンドになりました。
インストールが完了しましたら、実際に実行してみましょう。
ts-node-devを実行する
それでは実際にts-node-devでTypeScriptコードを実行してみましょう。
以下のコマンドを実行してください。
|
1 |
$ npx ts-node-dev --respawn hello.ts |
--respawnを指定することで、サーバ型ではないスクリプトでも、実行後終了せずに待機させ、更新→再読み込み→再起動が可能に。
TypeScript + node.js + VisualStudioCodeの開発環境
このように表示されたら成功です。
|
1 |
{ message: 'Hello World' } |
TypeScriptファイルを変更してみる
ts-node-devの醍醐味は変更してこそです。
TypeScriptファイルをこのように変更してみましょう。
|
1 2 |
let message: string = 'Hello Japan'; console.log({ message }); |
|
1 |
{ message: 'Hello Japan' } |
まとめ
- ts-node-devを使うとホットリロードができるようになる
