I have recently made the switch from using AlterX's solution to utilizing tsc-watch and have been impressed by its performance improvement. Tsc-watch allows for incremental compilation, similar to the -w flag, resulting in a much faster restart of the application.

To implement tsc-watch in your project, simply add the following line to your package.json file:

"scripts": {
  "start": "tsc-watch --onSuccess \"node .\""
}

Make sure to include the following in your package.json:

"scripts": {
  "start": "concurrently --kill-others \"tsc -w\" \"nodemon dist/app.js\"",
}

Don't forget to also install these npm packages (concurrently, nodemon, typescript) in your package.json:

"devDependencies": {
  "concurrently": "^2.2.0",
  "typescript": "^1.8.10",
  "nodemon": "^1.9.2",
}

How things are unfolding

The issue at hand involves the presence of two watchers overseeing all the files. One is operating as tsc -w, while the other is functioning as nodemon.

Whenever a modification is made to a file with a .ts extension, tsc detects it, compiles the changes, and generates the corresponding .js version in your specified destination folder.

From the perspective of Nodemon, there are multiple alterations being noticed—one for the .ts file and another one for the newly created .js file. Upon detecting the first change, Nodemon restarts itself automatically. However, upon sensing the second change, it mistakenly attempts to restart again, resulting in a failure. This seems to be a flaw within nodemon – more details can be found at https://github.com/remy/nodemon/issues/763.

Possible Resolutions

1) Utilize tsc-watch --onSuccess

tsc-watch features the --onSuccess option, where you can incorporate node. This method ensures the presence of just one watcher.

2) Implement a Delay for nodemon

You have the ability to postpone nodemon restarts easily (refer to --delay). This solution necessitates minimal adjustments.

3) Restrict nodemon's Monitoring to TSC's Destination Folder Only

Although initial setup issues may arise, configuring nodemon to monitor solely the destination folder produced by TSC could potentially resolve the problem of multiple detections. Nevertheless, this approach might pose challenges in the future or when tsc generates numerous files.

My approach in October of 2018 utilizing the latest versions of nodemon.

Step one:
Firstly, you need to install nodemon (npm install nodemon --save-dev) and ts-node (npm install ts-node --save-dev).

Step two:
Next, create a nodemon.json. I prefer keeping my nodemon configuration separate in a nodemon.json file to make npm scripts easier to understand. Create the nodemon.json in the project root with the following contents:

{
    "ignore": ["**/*.test.ts", "**/*.spec.ts", ".git", "node_modules"],
    "watch": ["src"], // your .ts source folder
    "exec": "npm start", // your npm script defined in package.json
    "ext": "ts"
}

After that, set up your npm start script like this:

"scripts": {
    ...
    "start": "ts-node src/server.ts",
    "dev:ts": "nodemon",
    ...
  }

Now, running npm run dev:ts or yarn dev:ts will execute and monitor your TypeScript server code.

To explore additional configurations like setting up Jest unit tests, refer to this article.

The TypeScript-Node-Starter is known for its high speed and efficiency.

Check out the GitHub repository here

"dev": "concurrently -k -n \"TypeScript,Node\" -c \"yellow.bold,cyan.bold\" \"npm run watch-ts\" \"nodemon ./dist/app.js\"",
"watch-ts": "tsc -w"

In this setup, npm run watch-ts has been labeled with the name TypeScript using concurrently -n, while also being highlighted in color yellow.bold through concurrently -c.

This configuration allows for easy identification of messages from each process running simultaneously.

Easy method for setting up nodemon to watch .ts files

Include this code snippet in your package.json

"scripts": {
    "start": "nodemon --exec ts-node-esm ./src/*.ts",
},

Add ts-node to your devDependencies by running npm i ts-node -D

Now you can start the process with npm run start or use yarn start

https://i.sstatic.net/D3fDi.png

For more information, check out this medium article: https://medium.com/@jonathans199/how-to-create-a-simple-node-api-with-typescript-4ab631b43503

If you're looking for an alternative approach, consider including the sleepcommand in your concurrently setup before launching nodemon.

For example:

"scripts": {
    "dev": "concurrently -k \"tsc -p ./src/server -w\" \"tsc -p ./src/client -w\" \"sleep 5 && nodemon ./dist/server/server.js\"",
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node ./dist/server/server.js"
  },

In my case, initializing both client and server TypeScript projects simultaneously led to nodemon starting up 3 times when I ran npm run dev. By introducing a brief pause with the sleep command before launching nodemon, I ensured that both tsc processes had completed their tasks, improving efficiency.

An alternative option could be utilizing the delay feature of nodemon, but personally, I only required the initial delay when running npm run dev. Subsequent recompilations trigger nodemon correctly without additional delays.

Note: If your server's performance is sluggish, consider extending the sleep duration beyond 5 seconds.

I also experimented with the recommended solution, but found that my custom approach yielded faster results during subsequent recompilations while keeping nodemon and tsc watch processes active.

With my method, there was only a 1-second delay compared to the accepted answer's 5-second delay. The key difference was ensuring that tsc operated in watch mode as intended, preventing full recompiles with every change in either TypeScript project.

In summary; Use nodemon to monitor changes in the output of tsc (specifically, the .js files).

You should configure nodemon to watch for the completion of tsc --watch, as mentioned in other comments. Simply instruct it to observe the output directory of tsc for alterations in .js files.

For instance, in your package.json:

"scripts": {
  ...
  "watch": "tsc --build src/tsconfig.json --watch",
  "watch-tests": "nodemon --watch dist -e js --exec \"yarn run tests\"",
  "tests": "some script to run my tests",
  ...
}

and in your src/tsconfig.json:

{
...
  "compilerOptions": {
    "outDir": "../dist",
    ...
  },
...
}

Where

• --watch <folder> corresponds to the directory specified in your compilerOptions->outDir from the tsconfig.json file,
• -e js focuses on changes within javascript files, and

• --exec <some arbitrary thing to run>

  enables nodemon to manage tasks beyond node.js scripts.

If you want to execute a node script using nodemon, you can simplify it to

nodemon --watch dist -e js my-node-script.js

Note: To prevent nodemon from triggering its script too quickly, utilize the throttle delay option with --delay

Running files with a .ts extension is made easy with the use of ts-node. By installing it globally, you can seamlessly integrate ts-node into your workflow, allowing tools like nodemon to automatically utilize it.