Typescript - tsconfig.json

Introduction

When working with Typescript, we use configuration files to tell the Typescript compiler how to compile our code. One of these configuration files is tsconfig.json. It contains various settings that affect the compilation process.

Sample tsconfig.json

Here is a sample tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",               
    "module": "commonjs",          
    "strict": true,               
    "esModuleInterop": true,      
    "outDir": "./dist",           
    "sourceMap": true             
  },
  "include": [
    "./src/**/*" 
  ]
}

Let's go through each of these settings in detail.

compilerOptions

This object contains the configuration options for the Typescript compiler.

target

This option defines the target ECMAScript version that the Typescript code will be compiled to. The available options are es3, es5, es6 / es2015, es7 / es2016, es2017, es2018, es2019, es2020, esnext.

module

This option defines the module system that the generated Javascript code will use. The available options are none, commonjs, amd, system, umd, es6 / es2015, es2015, esnext.

strict

Enables strict type-checking options. This will catch more errors in your code during compilation.

esModuleInterop

This option tells the compiler to use the new import / export syntax when generating code.

outDir

This option defines the output directory for the compiled Javascript code.

sourceMap

This option generates a sourcemap that can be used to debug the generated Javascript code.

include

This option defines the files and folders that should be included in the Typescript compilation process.

Conclusion

The tsconfig.json file is an essential part of the Typescript setup. It allows us to configure the compiler and ensure that our code is compiled in a way that is compatible with our desired runtime environment.