Can TypeScript Automatically Compile .ts Files in Real-time Upon File Changes?

In TypeScript, you can use the TypeScript compiler (tsc) with the --watch or -w option to achieve real-time compilation of .ts files. When this option is enabled, any modifications to TypeScript files will trigger recompilation.

How to Set Up

First, ensure that TypeScript is globally installed. If not, install it using npm:

bash
npm install -g typescript

Next, you can run the following command in the root directory of your project to start real-time compilation:

bash
tsc --watch

Or use the short option:

bash
tsc -w

This command will monitor changes to all .ts files in your project and automatically recompile them upon modification.

Practical Example

Suppose you are developing a Node.js application with a file app.ts in your project. Open a terminal in the root directory of your project and run tsc -w. Then, whenever you modify and save app.ts, the TypeScript compiler automatically compiles it into JavaScript, typically app.js, based on your tsconfig.json settings.

tsconfig.json

To have finer control over the compilation process, you can create a tsconfig.json file in the root directory of your project to define compilation options, such as the output directory and target ECMAScript version. For example:

json
{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "commonjs",
    "target": "es6",
    "strict": true
  },
  "include": ["src/**/*"]
}

With this configuration, all .ts files are compiled into the dist directory, targeting ECMAScript 6, and only files in the src directory are included.

Summary

Using the --watch option in TypeScript greatly enhances development efficiency, especially during development, allowing you to see the effects of changes instantly. This is a highly practical feature, particularly in large projects, as it enables developers to iterate and debug code rapidly.