The Typescript compiler and tsconfig

April 11, 2020

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

The tsc accept parameters on execution process or 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 convert the typescript code to plain JavaScript, for the demo use app.ts file with few lines of typescript.

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.

tsc app.ts

The tsc take the typescript code and convert it to plain 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.

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 a option for watch every changes in the app.ts using tsc with the parameter —watch or -w and will listen for changes of app.ts.

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 compiles more than one file, use the command line is not the best approach.

How to create the tsconfig.json

The Typescript compiler allow to create a file for each option and it be defined in the tsconfig file.

When the tsc found a tsconfig into the directory , the compiler understand the directory is a project and read 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.

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 to set a list of files to be exclude into the compilation process and also support pattern for be exclude. By default node_modules is always excluded, so you don’t need to exclude.

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

include it allow to set 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.

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

The compilationOptions

The compilationOption have 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 be 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 drastic different.

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

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

The code generated as es5 don’t include class and constructor because es5 not understand *class *keyword.

"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 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 generate the .js files, if set to true the compiler don’t generate the files if found some error.

strict” Enable all restriction by default like nullchecks, strictPropertyInitialization it is very help full to avoid common errors.

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

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

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

noFallthroughCasesInSwitch Set to true and the compiler will raise a error if switch case don’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 of the options in the tsconfig but you can read a full information in Official Typescript home page

Final!

That gives to you a bit of a head-start on 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 :).