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.
If we execute the above command, a default tsconfig.json file will be created.
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 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.
| Option | Type | Default | Description |
|---|---|---|---|
| –allowJs | boolean | false | Allow JavaScript files to be compiled. |
| –alwaysStrict | boolean | false | Parse in strict mode and emit “use strict” for each source file. |
| –baseUrl | string | It is base directory to resolve non-directory module names. | |
| –build–b | boolean | false | It is used to build a project and all of its dependencies specified by project references. |
| –declaration–d | boolean | false | It generates a corresponding .d.ts file. |
| –diagnostics | boolean | false | It shows diagnostic information. |
| –experimentalDecorators | boolean | false | It enables the experimental support for ES decorators. |
| –isolatedModules | boolean | false | It is used to transpile each file as a separate module. |
| –module–m | string | target === “ES3” or “ES5” ? “CommonJS” : “ES6” | The output module type, e.g. “CommonJS”, ?AMD?, “System”, “ES6”, “ES2015” or “ESNext.” Default value is CommonJS if the target attribute is ES3 or ES5; else default is ES6. |
| –moduleResolution | string | module === “AMD” or “System” or “ES6” ? “Classic” : “Node” | It determines how modules get resolved. Either “Node” for Node.js/io.js style resolution, or “Classic.” |
| –noEmitOnError | boolean | false | Do not emit outputs if any errors were reported. |
| –outDir | string | Redirect output structure to the directory. | |
| –sourceMap | boolean | false | Generates a corresponding .map file. It helps in debugging. |
| –target–t | string | “ES3” | Specify ECMAScript target version: “ES3” (default), “ES5”, “ES6″/”ES2015”, “ES2016”, “ES2017” or “ESNext”. |
| –watch–w | It runs the compiler in watch mode. It means that whenever any of the source files are changed, then the compiling process is re-triggered to generate the transpiled files again. |
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.