TypeScript Compiler Configuration

TypeScript compiler uses tsconfig.json to get configuration options for generating JavaScript code from TypeScript source-code. When you uses '$ tsc' command to compile TypeScript code, compiler searches for configurations located in tsconfig.json.

1. The tsconfig.json is generally put in the root folder of the project.
2. It provides the compiler options required to compile the project.

1. Creating tsconfig.json

Before we start using TypeScript, make sure we have installed it. To use conveniently, install it as global dependency so that we can use tsc command from console window.

Then use 'tsc --init' command to create tsconfig.json file in your project’s root folder.

$ npm install typescript -g 	//Install typescript

$ cd project_root		//Go to project's root folder

$ tsc --init			//Create tsconfig.json in project's root folder

A default tsconfig.json will be created.

{ 
   "compilerOptions":{ 
      "target":"es6",
      "moduleResolution":"node",
      "module":"commonjs",
      "declaration":false,
      "noLib":false,
      "emitDecoratorMetadata":true,
      "experimentalDecorators":true,
      "sourceMap":true,
      "pretty":true,
      "allowUnreachableCode":true,
      "allowUnusedLabels":true,
      "noImplicitAny":true,
      "noImplicitReturns":false,
      "noImplicitUseStrict":false,
      "outDir":"dist/",
      "baseUrl":"src/",
      "listFiles":false,
      "noEmitHelpers":true
   },
   "include":[ 
      "src/**/*"
   ],
   "exclude":[ 
      "node_modules"
   ],
   "compileOnSave":false
}

2. TypeScript Compiler Options

Let’s go through some important compiler options, we must know.

Option
Description
allowJs
Allow JavaScript files to be compiled. Default value is false.
alwaysStrict
Parse in strict mode and emit “use strict” for each source file. Default value is false.
module
The output module type e.g. “CommonJS”, “AMD“, “System“, “ES6“, “ES2015” or “ESNext“.
Default value is CommonJS if target attribute is ES3 or ES5; else default is ES6.
target
Specify ECMAScript target version. Default value is ES3.
moduleResolution
Determine how modules get resolved. For module type ES6, AMD or System – default value is classic; else Node.
sourceMap
Indicates to generate sourcemap or not. Sourcemaps helps in debugging.
outDir
The location in which the transpiled files should be kept.
baseUrl or paths
Instructing TypeScript where it can find the type files.
watch
Used for livereload. It means that whenever any of the source file is changed, then the compiling process is re-triggered to generate the transpiled files again.
experimentalDecorators
This option enables using decorators in TypeScript projects. ES has not yet introduced decorators, so they are disabled by default.

Follow official page for complete list of compiler options.

3. Include and exclude options

These options takes an array of global patterns that need to be included in the compilation path, to add or remove files from compilation process.

"include":[ 
  "src/**/*",
  "src/app/shared/**/*",
  "typings/*.d.ts"
],
"exclude":[ 
  	"node_modules",
	 "jspm_packages",
	 "application", 
	 "system",
	 "dist"
]

Drop me your questions in comments section.

Happy Learning !!

Was this post helpful?

Join 7000+ Awesome Developers

Get the latest updates from industry, awesome resources, blog updates and much more.

* We do not spam !!

4 thoughts on “TypeScript Compiler Configuration”

  1. uh… cannot it be just made “global” instead of “per project” ?
    Why ? Because we are a team and everyone has his own personal preferences while we all do git check out the same project… then we all check in whatever we change.
    But we don’t want to have to recreate a tsconfig.json every time one wipes his local repo (there are some clumsy people) and this file should not go in the repo anyway….
    So, can it be created and tossed into my c:\Users\dude\tsconfig.json ?
    I’m gonna give it a try on this idea, but thanks for the post.

    Reply
  2. Typo on the typescript install:

    $ npm uninstall typescript -g   //Install typescript
    

    should be

    $ npm install typescript -g   //Install typescript
    
    Reply

Leave a Comment

HowToDoInJava

A blog about Java and related technologies, the best practices, algorithms, and interview questions.