TypeSript Compiler Configuration

If you need to run a TypeScript project fast and with zero configuration, use Parcel, a web bundler with TypeScript support, and hot module reloading. But the same can be done with a TypeScript compiler and a little bit of configuration. That's what we are going to explore in this post.

TypeScript Compiler

To run TypeScript in the browser, it needs to be compiled into JavaScript first. We will use a compiler that is implemented in the TypeScript language. The compiler is accessible in the terminal with a shorthand tsc. If you don't have it installed yet, run a command in the terminal:

npm install -g typescript

When you run a compiler at the command line with a file path to the TypeScript file, it compiles and outputs a JavaScript file with the same name. So if you run tsc index.ts in a project directory, a new file index.js will be created in the same directory with a compiled code.

If you make changes in the index.ts file, they will not be re-compiled automatically into JavaScript. The compiler command needs to rerun; therefore, this can be avoided if you run a command with --watch flag. It will watch for any changes in the specified file, and if it detects one, re-compiles again:

tsc --watch index.ts

Project Structure

Let's make a simple project structure with two separate folders. An src folder to store TypeScript files, and a build folder to keep compiled JavaScript code. This will make a project more structured:

myapp
└───src
    │   index.ts
└───build
    │   index.js

To put compiled code automatically into the build folder we specify the outcome directory to the compiler:

tsc --watch src/index.ts --outDir build

Now the compiler will watch for file changes to the index.ts and automatically re-compiles to build/index.js file.

As it is a tedious job always to write the same long command, we can use the tsconfig.json configuration file. Use the terminal command tsc --init to create the file into the root directory. The file will consist of many configuration options, but for now, we are interested only in output and root directories. Let's put in the respective directory paths:

{
  "compilerOptions": {
    ...
    "outDir": "./build",                       
    "rootDir": "./src",
    ...
  }
}

After it, you should be able to compile TypeScript code with just tsc --watch terminal command. The compiler will use the configuration file to determine income and outcome paths automatically.

Running The Code

Running the code is straightforward: node build/index.js
But there are a couple of gotchas. First, the code will run only once, and it will not track changes to the file. After each file changes, you will need to rerun the command. Second, if you want to keep running the TypeScript compiler, a JavaScript file must run from a different terminal window.
Two of these obstacles can be fixed by using nodemon and concurrently libraries. Nodemon utility runs an application, tracks for file changes, and restarts the server if it detects them. Concurrently is a utility that lets to run multiple commands concurrently, which is what we want: to run index.js and compile idnex.ts at the same time.
To install dependencies, we need to create package.json first. All can be done with the following command:

npm init -y
npm install nodemon concurrently

In the created package.json file let's add following scripts to run the application concurrently:

{
  ...
  "scripts": {
    "start:build": "tsc -w",
    "start:run": "nodemon build/index.js",
    "start": "concurrently npm:start:*"
  },
  "dependencies": {
    "concurrently": "^5.2.0",
    "nodemon": "^2.0.4"
  }
}

A script command start will run concurrently that will look for scripts that begin with words npm:start: and run them. In our case, it will run start:build and start:run.
Now we can start the application with:

npm run start

Summing up

We have configured the Typescript compiler and the Node.js to run in the same terminal window, look for file changes to both index.ts and index.js, and restart the application to apply them.