TypeScriptのコードが変更されたら自動で再実行させる

皆さんはTypeScriptの学習であったり、すぐにコードの挙動を確認したい時はどうしてますか？公式のプレイグラウンドを使う方が多いのでしょうか。今回は普段使っているエディターでそれに似た環境を作ってみたのでご紹介します。コードに変更があったら自動で再実行させるため、nodemonとts-nodeを使いました。

nodemon
ファイル変更を検知してアプリケーションを再起動するツール

ts-node
REPLも備えた、TypeScript実行ツール

https://www.npmjs.com/package/nodemon

https://www.npmjs.com/package/ts-node

動作環境

• macOS Sonoma
• Node.js 20.10.0
• TypeScript 5.4.5
• nodemon 3.1.0
• ts-node 10.9.2

ディレクトリ構成

myApp/
├── src/
│   └── index.ts
├── package-lock.json
└── package.json

※一部省略

必要なパッケージをインストールします。

npm i -D typescript nodemon ts-node

package.jsonを変更します。

package.json

{
  // 一部省略
- "main": "index.js",
+ "main": "src/index.ts",
  "scripts": {
+   "start": "nodemon -w src -e ts"
  },
}

nodemon -w src -e ts
srcディレクトリ以下のtsファイルに限定して監視する設定です。デフォルトではアプリケーション全体のts jsonファイルの監視になります。

では実行してみましょう。

npm start

ターミナルにこのように表示されれば成功です。🎉

> test_tsnode_nodemon@1.0.0 start
> nodemon -w src -e ts

[nodemon] 3.1.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src/**/*
[nodemon] watching extensions: ts
[nodemon] starting `nodemon -w src -e ts`

これでsrcディレクトリ内のtsファイルを変更したら再実行されるようになりました。
処理としては、ファイル変更を検知したnodemonがts-nodeを起動、ts-nodeがTypeScriptを実行する、といった流れです。もちろんindex.ts以外に他のディレクトリやファイルを追加してもしっかり動作します。

ちなみにnodemonはts-nodeが存在した場合はデフォルトでそれを起動するため、特に設定は必要なく今回のような動作をさせることが出来ています。

最後まで読んでいただき、ありがとうございました！