Why is tsc called twice in this npm start script?

Question

The package.json example at this link includes the following start commands:

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",  

What explicitly does the above command do?

I think that the "concurrently \"npm run tsc:w\" \"npm run lite\" " means to start both tsc and lite-server simultaneously, and to also place a watch on the tsc so that changes are reloaded into lite-server immediately. Is this correct? And also, why call tsc twice? What is an explicit explanation of the entire line of code including all of its constituent parts put together?

Answer 1

You can break it down the command into parts (with quotes removed):

1. tsc
2. concurrently
3. npm run tsc:w
4. npm run lite

The first part calls the TypeScript compiler CLI and compiles your TypeScript files.

Next, there is an && which means "cmd1 then/and cmd2". The next section:

concurrently npm run tsc:w npm run lite

Uses the concurrently package CLI to run the given commands, which are npm run tsc:w and npm run lite. The part:

npm run tsc:w

This runs the script in your package.json:

"tsc:w": "tsc -w"

Then npm run lite runs the corresponding script in package.json:

"lite": "lite-server"

So you're technically calling tsc twice but tsc:w starts watching your TypeScript files. Using -w does not do an initial build, so the first tsc is needed to build your files initially, then -w watches your files and rebuilds subsequent changed files. The concurrent script then runs the watch script and the server.