TypeScript Tsconfig.JSON

The compilation context refers to a collection of TypeScript files that are parsed and analyzed to assess their validity. This context includes details regarding the compiler options currently in effect. We can establish this logical set of TypeScript files by utilizing a tsconfig.json file.

The TypeScript files can be compiled utilizing the command tsc <file name>.ts. When executing the '$tsc' command for compiling TypeScript code, the compiler looks for configurations specified in the tsconfig.json file. Additionally, TypeScript offers a feature to compile several .ts files within a larger project.

tsconfig.json

The tsconfig.json file is a configuration file formatted in JSON. Within the tsconfig.json file, various settings can be defined to instruct the compiler on how to compile the present project.

The initial action when starting a new TypeScript project is to incorporate a tsconfig.json file. To generate this file, navigate to the directory where you intend to keep your source files and create a new file titled tsconfig.json.

There are several methods to compile a TypeScript project:

• ✅ By running tsc without any specified input files: Here, the compiler looks for the tsconfig.json file beginning in the current directory and continues up through the parent directories.
• ✅ By executing tsc without input files along with a --project (or -p) argument: In this scenario, the compiler indicates the directory path that holds a tsconfig.json file, as well as a path to a valid .json file containing the necessary configurations.

Create tsconfig.json file

We can generate a tsconfig.json file in the root directory of our project by executing the following command.

$ tsc --init

Executing the command above will generate a default tsconfig.json file.

{  
  "compilerOptions": {  
    "declaration": true,  
    "emitDecoratorMetadata": false,  
    "experimentalDecorators": false,  
    "module": "none",  
    "moduleResolution": "node",  
    "noFallthroughCasesInSwitch": false,  
    "noImplicitAny": false,  
    "noImplicitReturns": false,  
    "removeComments": false,  
    "sourceMap": false,  
    "strictNullChecks": false,  
    "target": "es3"  
  },  
  "compileOnSave": true  
}

Include and Exclude properties

The include and exclude properties enable us to specify an array pattern for adding or omitting a set of TypeScript files during the compilation process.

{
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "../../built/local/tsc.js",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

compilerOptions Property

We can customize the compiler options properties by using compilerOptions. It allows specifying additional options to the typescript compiler. Some of the important compiler options are summarized in the following table.

To see the complete list of compiler options go to the official page .

compileOnSave

This property is utilized to configure the IDE for compiling the associated TypeScript files and automatically producing the output. It instructs the IDE to generate all files specified in a tsconfig.json file whenever a save action occurs.

{
   "compileOnSave": true,
   "compilerOptions": {
       "noImplicitAny" : true
   }
}