Use of TypeScript Configuration File(tsconfig.json)

 Assume that i have list of ts files in a folder as shown below in the folder

C:\Examples

>tsc tsc.cmd methodoveriding --removeComments
>tsc file2 --removeComments

          ..
                       |
    repetition of target and remove comments
   

Each .ts file, when we compile it will generate a .js file.  In that .js file which has comments in that file. So now I want a common configuration file which should tell do not include comments in the js file.

The solution for this is tsconfig.json file

Now , we will 

 d:\project1
           |
         file1.ts
         file2.ts
         tsconfig.json-->target:"es6"
                         removeComments:true

typescript configuration file will provide instructions to typescript
 compiler to compile the files present in the current folder and sub folders

typescript configuration filename is tsconfig.json

syntax:
 {
   "compilerOptions":{
    "target":"..",
    "removeComments":"..",
    "sourceMap"     :"..",
    "outDir"        :"..",
    "outFile"       :"..",
           ...
                     },
     "files"  :[...], 
     "include":[...],
     "exclude":[...],
        ...
  }

1.target-specify ecma script target version, default is es3
2.removeComments-true | false
                                 true--ts file comments will not be placed into js file, this                                                     will minify[reduce] js file size.
                                 false--.ts files comments will be placed into js file.

3.sourceMap--true |  false
                                 true--map file be generated for debugging.
                                 false--map file will not be generated.
 4.outDir--    specify output directory name to store  |  place js files
 5.outFile--   specify js filename to bundle ts files compiled code.
 6.files--specify filenames to be considered for compilation
 7.include--specify folder names to be considered for compilation.
 8.exclude--specify filenames and folder names to be skipped for compilation

Example

Let us create a new folder.

Go to command window
  C:\>md angulartsconfig

   C:\>cd angulartsconfig

Go to Visual Studio and open the newly created folder.

Click on new file button
    file1.ts
        |
//file1 code
console.log("file1 code");

*click on new file button
    file2.ts
        |
//file2 code
console.log("file2 code");

*click on new file button
    file3.ts
        |
//file3 code
console.log("file3 code");


















click on new file button
   tsconfig.json
       |
{
  "compilerOptions": {
      "target": "ES5",
      "removeComments": true,
      "sourceMap": false,
      "outDir": "dist"
   }
}

Next , let me create a new folder with the Name Demo

Inside Demo folder, let me create another three typescript files

file4.ts, file5.ts, file6.ts

Now just run 

Now, you can see a new dist folder is been created and the ts files are converted to js files as below. You can also see the same structure is been created. 

Now, let me open the file1.js , to check if the comments exists or not.

outFile:

-------
The requirement is bundling all the ts files compiled code into single js file bundle.js,

this requires outfile option

*goto tsconfig.json
  {
    
  "compilerOptions": {
      "target": "ES5",
      "removeComments": true,
      "sourceMap": false,
      "outDir": "dist",
      "outFile": "bundle.js"  ===>[add this line]
                 }
 }

Goto Terminal and Run Now





You will be able to see the bundle.js file Now














files option:
-------------
The requirement is compilation of file3.ts and file6.ts,this requires files option




















Goto Terminal 



Goto bundle.js and see 






include and exclude options:
----------------------------
The requirement is compilation of all the files except file6.js[Demo folder],this
requires include and exclude option

Goto tsconfig.json

Goto Bundle.js and see the output

Note: when we go with include and exclude option file options is not required.

In the above example in the include option we are saying that all the files present in the root folder and Demo folder.

project[-p] option with tsc
---------------------------
This is used to inform typescript configuration filename to tsc ,this is required
 when the typescript configuration filename is other than tsconfig.json

Syntax:
  tsc -p "configfilename"

Now, let us rename the existing tsconfig.json to tsconfig1.json


After that compile, and see you will get an Error. The reason is it will look for tsconfig.json file only. As we have renamed it it will give us an error. Now we need to tell the configuration file name

extends option

This is used to create a new configuration file based on existing configuration
file, this provides reusability.

Requirement is

In my project I have two files, with the name 
login.ts, 
register.ts

Now, I am going to create a new tsconfig5.json file with the below options
tsconfiges5.json-->     target:"es5",
                                 outFile:"es5bundle.js",
                                 removeComments:true,
                                 sourceMap:false

tsconfiges6.json-->    target:"es6"
                         outFile:"es6bundle.js",
                         removeComments:true,
                                sourceMap:false

Here, repetition of remove Comments and source Map options in 2 config files

The solution is creating a base configuration file with common options, this
base configuration file can be inherited [extended]  from other configuration files using extends option

The above one using extends:
       project1
          |
       login.ts
       register.ts
       base.json  ========> "removeComments":true,
                                             "sourceMap":false

      tsconfiges5.json====>    "extends":"./base.json",
                                             "target":"es5",
                                              "outFile":"es5bundle.js"

      tsconfiges6.json====> "extends":"./base.json",
                                              "target":"es6",
                                              "outFile":"es6bundle.js"


tsc -p tsconfiges5.json===>it will generate production bundle[es5bundle.js]
                                           targeting to es5

tsc -p tsconfiges6.json===>it will generate production bundle[es6bundle.js]
                                          targeting to es6