TypeSript Compiler Configuration
Tags: typescript
Published: 2020-06-21 12:54:48

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:
```ts
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:
```json
{
  "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:
```json
{
  ...
  "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.