Day03: TypeScript Made Easy with Automatic Compilation Using tsc + nodemon

In the previous article, I mentioned that we have to manually run tsc xx.ts and node xx.js every time we write. Isn't that tiring? I'm tired, so I'm sharing this article to help us automate compilation and speed up our learning time.

1. Create two folders: src and dist.

2. In the src folder, create a file named index.ts and write:

const index: string = "this's index"
console.log(index)

3. The folder structure will look like this:

project

└───dist
│   │
│
└───src
    │   index.ts

4. Initialize the project in the folder by running the npm initialization command:

npm init -y

5. Run the following command to generate the tsconfig.json file, which is the TS initialization configuration file:

tsc --init

6. Open tsconfig.json and set the paths for outDir and rootDir.

"outDir": "./dist", // Path where the compiled JS files will be generated
"rootDir": "./src",   // Path representing the entry point for TS files

7. Run tsc, and you will see the compiled index.js in the dist folder.

tsc

8. Run the following command to install nodemon and concurrently:

npm i nodemon concurrently --save-dev

9. Modify the scripts section in package.json:

  "scripts": {
    "start:build": "tsc -w",  // Watch TS files in src and automatically compile JS files
    "start:run": "nodemon ./dist/index.js", // Execute when a new JS file is generated
    "start": "concurrently npm:start:*" // Execute all commands containing "start" (including start:build and start:run)
  },

10. Run:

npm start

11. At this point, you should see the compiled JS file in the dist folder, and the terminal should print this's index, indicating successful execution.

project
│   node_modules
│   package-lock.json
│   package.json
│   tsconfig.json
│
└───dist
│   │   index.js
│
└───src
    │   index.ts


Isn't it convenient? You can check the demo here, which I have also synchronized on GitHub.

In this article, we set the outDir and rootDir in tsconfig.json. In the next article, I will note what other settings can be configured in tsconfig.json. I initially found it confusing when I saw the handbook introducing types, so I decided to move this topic up for better understanding later.

References

https://www.typescripttutorial.net/typescript-tutorial/nodejs-typescript/