The TypeScript tsconfig.json file is a configuration file to specify the compiler options. These compiler options are used to compile the TypeScript code and convert it into JavaScript code. However, it also allows developers to specify some more configurations in the JSON format to use in the project.

The tsconfig.json file is always present in the root directory of the project. This file contains the data in JSON format.

Basic Structure of tsconfig.json file

The tsconfig.json file mainly contains 5 properties given below and all are optional:

• compileOnSave
• compilerOptions
• files
• include
• exclude

If you don’t use any of these properties in the tsconfig.json file, the compiler uses the default settings.

Here is the basic structure of the tsconfig.json file.

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es6",
        "lib": [
            "es6",
            "dom"
        ],
        "module": "commonjs"
    },
    "files": [
        "app.ts",
        "base.ts"
    ],
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "src/**/*.calc.ts"
    ]
}

In the above file, you can add more compiler options, or elements in the list of other properties according to the requirements.

Let’s understand each property one by one here.

The compileOnSave Property

The compilerOnSave property is used to specify whether you want to compile the project code immediately when you save the code. The default value of the compilerOnSave property is false.

If you use the false value for this property, you need to compile the code manually.

Here is how you can use the compileOnSave property in the tsconfig.json file.

{
    "compileOnSave": boolean_value
}

The compilerOptions Property

The compilerOptions is a widely used property in the tsconfig.json file. It is used to specify the settings for the TypeScript compiler to compile the code. For example, if you want to use a specific version of JavaScript or a module while compiling the TypeScript code, you can modify the compilerOptions property.

Here are some common compiler options to use in the tsconfig.json file.

Here is the common way to use the compilerOptions in tsconfig.json file.

{    
    "compilerOptions": {
        "target": "es6",
        "lib": [
            "es6",
            "dom"
        ],
        "module": "commonjs"
    }
}

The files Property

The files property takes the list of files as a value to include in the compilation process. You can add filenames directly if it is in the root directory, or the relative or absolute file path for each file, which you want to include in the compilation process.

Here, we have shown how to use files properties in the tsconfig.json file.

"files": [
    "app.ts",
    "base.ts"
]

The include Property

The include property allows developers to add the list of TypeScript files for the compilation using the wildcard queries.

If you want to add all files in the compilation, you can use the below wildcard query.

"include": [
    "src/**/*"
]

The above configuration adds all files, which are in the src directory.

The exclude Property

The exclude property is the opposite of the include property. It allows developers to remove particular files using the wildcard queries from the compilation process.

"exclude": [
    "node_modules",
    "src/**/*.calc.ts"
]

The above configuration removes the node modules and calc.ts file from the compilation process.

Common Scenarios and Configurations

Here, we have explained the common scenarios for which developers are required to change the tsconfig.json file.

Targeting Different ECMAScript Versions

If you want to target different ECMAScript versions while compiling the TypeScript code, you can use the below configurations. Here, we have changed the value of the target and module properties of the compilerOptions object.

{
  "compilerOptions": {
    "target": "es6",
    "module": "es2015"
  }
}

Including Node.js Type Definitions

When you work with Node.js, you might need to add a type definition, and here is how you can add it.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2018",
    "lib": ["es2018", "dom"]
  },
  "include": [
    "src/**/*"
  ]
}

Excluding Test Files

Sometimes, developers are required to remove the testing files from the compilation process. Here is how you can remove particular test files or directories using the exclude property.

{
  "exclude": ["**/*.spec.ts", "**/*.test.ts"]
}

It is always important for TypeScript developers to understand managing the tsconfig.json file. You can edit this file to change the module while compiling the code, adding and removing files from the compilation process, and for automatic compilation after saving the file.