The Typescript compiler and tsconfig

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.

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.

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.

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.

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.

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.

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.

 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.

"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

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 Michael Dziedzic on Unsplash