I want to show a small overview of the typescript compiler, and the tsc is responsible for compiling our typescript code, watching 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 it works with the compiler by command line, 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 the app.ts file with a 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 takes the typescript code and converts 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 is to modify the app.ts and compile again, but running tsc for each modification is not a good deal.

The tsc can 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. We were starting incremental compilation.

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

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

How to create the tsconfig.json

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

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

We generate the tsconfig running the command tsc --init and generating 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 converts 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 allows setting a list of files to be banned into the compilation process and supports the pattern for exclusion.

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

include Help to list files or patterns to include in 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 compilation option has a list of basic settings beneficial for code generation and code quality checks. There is a list of the most used options.

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

The result will be drastically different if you compile the app.ts with es5 and ES2015 versions.

The code generated with ES2015 is similar to the app.tsbecause of the 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 the 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: Help to set the library to be included in the compilation. By default, it will consist of DOM library, es6, and mostly library needs if not specified.

sourceMap If set to true, the compiler will generate source maps for the typescript code and help debug 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 it's actual, the compiler doesn't create the files if found some error.

strict" Enable all restrictions by default like null checks; strict property initialization immensely helps full 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 the function return a value.

noFallthroughCasesInSwitch Set to true, and the compiler will raise an error if the 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.

The tsconfig, but you can read the complete information in Official Typescript home page

Final!

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

If you enjoyed this post, please share :).

Photo by Michael Dziedzic on Unsplash