I created two scripts "compile" and "dev". To start developing you simply run npm run dev which starts nodemon and makes it watch .ts files (using the -e flag). Then, every time a .ts file changes nodemon will exec the compile task which basically compiles and runs the node app.
While using concurrently is a good option, my setup guarantees that tsc's work is done before attempting to execute the resulting .js files.
I have been using AlterX's solution for a while now and it has worked perfectly, but I have found it to be rather slow. Instead, I am now using tsc-watch. It makes tsc use incremental compilation similar to the -w flag, making the restart of the application much faster.
It's as easy as putting something similar to this in your package.json:
second:
create a nodemon.json . I like to keep my nodemon config in a seperat nodemon.json to make the npm scripts a tad easier to read. So create nodemon.json in the root of the project with the following content:
{
"ignore": ["**/*.test.ts", "**/*.spec.ts", ".git", "node_modules"],
"watch": ["src"], // your .ts src folder
"exec": "npm start", // your npm script created in package.json
"ext": "ts"
}
The problem is there are two watchers here on all the files. One is tsc -w and one is nodemon.
When a change to a .ts file is made, tsc detects that, compiles it, and creates the .js version in your destination folder.
Now from the Nodemon's perspective, it detects two changes (at least) -- one for .ts and one for .js. On the first change it restarts itself, but on the second change it doesn't know that another "start" is going on already, so it tries to restart again and it fails. To me it's a nodemon bug -- see https://github.com/remy/nodemon/issues/763.
Solutions
1) Use tsc-watch --onSuccess
tsc-watch has --onSuccess which you can put node on there. This way you will have only one watcher.
2) Delay nodemon
You can easily delay nodemon restarts (See --delay). It requires the least set up change.
3) Have nodemon only monitor destination folder of TSC
I couldn't get it to set up, but this way nodemon will detect only one change hopefully. It might cause problems in future or when tsc generates multiple files.
In my situation, I generate both client and server typescript projects at the same time, which causes nodemon to actually start 3 times when I execute npm run dev. But if I sleep 5 seconds before starting the nodemon process, then both tsc processes have already finished, and then continue watching.
You could also use the delay option of nodemon, but I only need it to delay the first time when I execute npm run dev. After that, every individual recompilation of which ever file in whichever project, correctly restarts nodemon only once.
caveat, If your server is slow, you may need to increase the sleep delay longer than 5.
Also, I did try the accepted answer, but my solution was faster for subsequent recompilations while nodemon and the tsc watch processes continued to run.
1 second for my solution, versus 5 seconds for the accepted. I couldn't get the accepted answer to actually run tsc in watch mode, so that's why it was slower, since both TypeScript projects were getting a full recompile on every change.
TL;DR;
Have nodemon watch for changes in tsc's output (i.e. .js files)
You want nodemon set up to monitor when tsc --watch is finished, as some have alluded to in other comments, so just ask it to watch the destination directory of tsc for changes in .js files.
For example, in 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",
...
}