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.

Example
$ 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.

Example
snippet
{
    "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.

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.

Example
snippet
{
   "compileOnSave": true,
   "compilerOptions": {
       "noImplicitAny" : true
   }
}
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +