入門：ts-node-devのハンズオン

どうも、ささおです。

今回は ts-node-dev をハンズオン形式でさらっと入門していきます。

ts-node-devとは？

ts-node-devはファイルの変更を検知すると自動でコンパイルして実行してくれる便利なやつです。

ts-nodeはファイルを変更したら、コンパイルと実行のコマンド（npx ts-node xxx.ts）を入力する必要がありましたが、
ts-node-devはファイルを変更したら自動でコンパイルして実行してくれます。

いわゆる ホットリロード という機能を提供してくれるわけですね。

TypeScriptファイルの作成

まずは今回作業用ディレクトリを作成してください。

ts-node-dev-practiceという名前のディレクトリを作成します。

以下のコマンドを実行してください。

$ mkdir ts-node-dev-practice

次に、TypeScriptファイルを作成しましょう。
hello.ts という名前のファイルを作成し、
以下のコードを記述してください。

let message: string = 'Hello World';
console.log({ message });

これで準備完了です。

ts-node-devのインストール

やることは２つです。

最新版を確認する

実行したいTypeScriptファイルのあるディレクトリ（ts-node-dev-practice）で、
以下のコマンドを実行してください。

$ npm info ts-node-dev

するとこのように、表示されるはずです。

最新版をインストールする

実行したいTypeScriptファイルのあるディレクトリ（ts-node-dev-practice）で、
以下のコマンドを実行してください。

$ 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コードを実行してみましょう。

以下のコマンドを実行してください。

$ npx ts-node-dev --respawn hello.ts

--respawnを指定することで、サーバ型ではないスクリプトでも、実行後終了せずに待機させ、更新→再読み込み→再起動が可能に。
TypeScript + node.js + VisualStudioCodeの開発環境

このように表示されたら成功です。

{ message: 'Hello World' }

TypeScriptファイルを変更してみる

ts-node-devの醍醐味は変更してこそです。
TypeScriptファイルをこのように変更してみましょう。

let message: string = 'Hello Japan';
console.log({ message });

すると、変更してすぐに以下のように出力されるはずです。

{ message: 'Hello Japan' }

まとめ