Typescript Compilation Context

The compilation context is a term for a grouping of the TypeScript files that will parse and analyze to determine what is valid and what is not valid. The compilation context contains the information about which compiler options are in use. We can define this logical grouping of TypeScript files by using a tsconfig.json file.

We can compile the TypeScript files by using the tsc <file name>.ts command. When we use '$tsc' command to compile TypeScript code, compiler searches for configurations which are loaded in the tsconfig.json file. TypeScript also provides an option to compile multiple .ts files in the large project.

tsconfig.json

The tsconfig.json file is a file which is in JSON format. In the tsconfig.json file, we can specify various options which tell the compiler how to compile the current project.

The first step in any new TypeScript project is to add a tsconfig.json file. To create tsconfig.json file open the folder where you want to store your source file and add a new file named tsconfig.json.

We can compile a typescript project in one of the following ways:

• By invoking tsc with no input files: In this case, the compiler searches the tsconfig.json file starting in the current directory following the parent directory chain.
• By invoking tsc with no input files and a --project (or just -p) command: In this case, the compiler specifies the path of a directory which contains a tsconfig.json file. It also specifies a path to a valid .json file which contains the configurations.

Create tsconfig.json file

We can create a tsconfig.json file in our project's root folder by using the following command.

$ tsc --init

If we execute the above command, a default tsconfig.json file will be created.

{  
  "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

An include and exclude properties allows us to take an array pattern to add or remove a list of TypeScript files from 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

It is the property which is used to set the IDE to compile the included TypeScript files and generate the output automatically. It signals to the IDE to generate all files for a given tsconfig.json upon saving.

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