The Typescript compiler and tsconfig
Tags: typescript, javascript, codenewbie
Published: 2020-04-11 00:00:00


I want to show a small overview of the typescript compiler, the tsc is responsible to compile our typescript code, watch changes, code checking, and more.

The tsc accept parameters on the execution process can read the configuration from the tsconfig.json file.

I will explain how works with the compiler by command line, how to generate a tsconfig.config, and explain some options.

### Using the tsc compiler.

The tsc compiler converts the typescript code to plain JavaScript, for the demo use  app.ts file with few lines of typescript.

```javascript
class App {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  congrats(): void {
    console.log(`Hello ${this.name}.`);
  }
}
```

Next, run the tsc from the command line with the file app.ts.

```terminal
tsc app.ts
```

The tsc take the typescript code and convert it to plain JavaScript.

```javascript
"use strict";
var App = /** @class */ (function () {
    function App(name) {
        this.name = name;
    }
    App.prototype.congrats = function () {
        console.log("Hello " + this.name + ".");
    };
    return App;
}());
```

### Using the watch mode.

The next step if we modify the app.ts and need to compile again, but run tsc for each modification is not a good deal.

The tsc has an option for a watch every change in the app.ts using tsc with the parameter *--watch* or *-w* and will listen for changes of app.ts.

```bash
C:\Users\dany\Desktop\hello-typescript\app>tsc app.ts -w
[3:41:21 PM] Starting compilation in watch mode...

[3:41:23 PM] Found 0 errors. Watching for file changes.

[3:41:44 PM] File change detected. Starting incremental compilation...

[3:41:44 PM] Found 0 errors. Watching for file changes.
```

The watch mode is good for a small demo or a single file, but not for big projects because if you need to compile more than one file, use the command line is not the best approach.

### How to create the tsconfig.json

The Typescript compiler allows creating a file for each option, and it is defined in the tsconfig file. 

When the tsc found a tsconfig into the directory, the compiler understands the directory is a project and reads the settings defined, like watch mode, version of javascript and more.

The tsconfig can be generated running the command  tsc --init and generate the default tsconfig.json.

```bash
C:\Users\dany\Desktop\hello-typescript\app>tsc --init
message TS6071: Successfully created a tsconfig.json file.
```

Now I can run again with the *--watch* option and the compiler convert all typescript files in the directory.

### Exclude and include files

The tsconfig file has a bunch of options for files compilation, code quality checks, and more, there are some options:

**exclude** option allow setting a list of files to be excluded into the compilation process and also support pattern for being excluded. 
By default, node_modules is always excluded, so you don't need to exclude.

```json
exclude : [ "somefile.ts", "**/legacy/*.ts"]
```

**include** it allows setting a list of files or pattern to be included into the compilation process, by default it will take all files by maybe you want to compile some file out of the application root.

```json
include : [ "somefile.ts", "**/legacy/*.ts"]
```

### The compilationOptions

The compilationOption has a list of important settings very helpful for code generation and code quality checks, there is a list of the most used options.

**target** define the version of JavaScript will convert the typescript code, by default is ES3 but can change to *ES6* or *ESNEXT* .

If compile the *app.ts* with *es5 *and *ES2015 *version, the result will be drastically different.

The code generated with as ES2015 close similar to *app.ts*, because of ES2015 support class keyword.

```javascript
 use strict";
class App {
    constructor(name) {
        this.name = name;
    }
    congrats() {
        console.log(`Hello ${this.name}.`);
    }
}
```

 The code generated as es5 doesn't include class and constructor because es5 did not understand *class *keyword.

```javascript
"use strict";
var App = /** @class */ (function () {
    function App(name) {
        this.name = name;
    }
    App.prototype.congrats = function () {
        console.log("Hello " + this.name + ".");
    };
    return App;
}());
```

**lib** : Is used to set library to be included in the compilation, by default if not set it will include DOM library, es6 and mostly library needs.

**sourceMap** If set to true,  the compiler will generate sourcemaps for the typescript code and help for the debugging process with the browser.

**outDir** Help to generate the compiled files to a specific directory like dist or build. The file structure defined in our project will be the same in the out directory.

**noEmitOnError**  By default the compiler always generates the .js files, if set to true the compiler doesn't generate the files if found some error.

**strict"** Enable all restriction by default like nullchecks, strictPropertyInitialization it very helps full to avoid common errors.

**noUnusedLocals**  Set to true, and the compiler will raise an error for not used variables or properties.

**noUnusedParameters** Set to true and the compiler will raise an error in development mode for parameters not used in a functions

**noImplicitReturns** Set to true, and the compiler will raise an error when not all code paths in function return a value.

**noFallthroughCasesInSwitch** Set to true, and the compiler will raise an error if switch case doesn't have a default case. 

**watch** Set to true and by default, the tsc will compile and watch changes, similar to tsc --w.

This is some options in the tsconfig, but you can read the full information in [Official Typescript home page](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html "Typescript handbook")

### Final!

That gives to you a bit of a head-start on the Typescript compiler and how to configure the typescript config with the options for code quality and strict mode.

If you enjoyed this post, please share :).

Photo by <a href="https://unsplash.com/@lazycreekimages?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Michael Dziedzic</a> on <a href="https://unsplash.com/s/photos/compiler?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>