Skip to main content

Configuring the tsconfig.json File

Introduction

In TypeScript, the tsconfig.json file is a crucial part that helps us control the TypeScript project's behavior. This file specifies the root files and the compiler options required to compile the project. In this tutorial, we will break down how to configure this file and what the different properties mean.

Creating A tsconfig.json File

To create a tsconfig.json file in your project, you can use the TypeScript compiler's --init option. Open a terminal, navigate to your project's root directory, and run the following command:

tsc --init

This command will create a new tsconfig.json file in your project with a set of default options.

Understanding tsconfig.json File

The tsconfig.json file is divided into two main sections:

  • compilerOptions: This property can be used to specify various options that direct the compiler to follow specific behaviors while compiling the TypeScript code.

  • files, include and exclude: These properties are used to specify which files or directories in your project should be included or excluded from the compilation process.

Configuring compilerOptions

The compilerOptions section in tsconfig.json can have many properties. Let's go through some of the most commonly used ones:

  • target: This option specifies the ECMAScript target version. The compiler will produce JavaScript that is compatible with this version. For example, if you set "target": "es5", the compiler will produce JavaScript that is compatible with ECMAScript 5.

  • module: This option specifies the module system to be used. For example, you can set it to commonjs, amd, system, umd, es6, es2015, es2020, or None.

  • strict: If you set this option to true, it enables a wide range of type checking behavior that results in more robust programs.

  • outDir: This option specifies the output directory for the compiled JavaScript files.

Here is a sample compilerOptions configuration:

"compilerOptions": {
   "target": "es5",
   "module": "commonjs",
   "strict": true,
   "outDir": "./dist"
}

Configuring files, include, and exclude

  • files: In this option, you can specify an array of file names to be included in the compilation.

  • include: This option is used to specify a wildcard match for file paths to be included in the compilation.

  • exclude: This option is used to exclude files or directories from the compilation process.

Here is a sample files, include and exclude configuration:

"files": [
   "src/main.ts",
   "src/other.ts"
],
"include": [
   "src/**/*"
],
"exclude": [
   "node_modules"
]

In this case, src/main.ts and src/other.ts will be compiled. All TypeScript files (**/*.ts) in src will be included, and files in the node_modules directory will be excluded.

Conclusion

The tsconfig.json file is a powerful tool in TypeScript that helps control how your project is compiled. By understanding and correctly using the different options in tsconfig.json, you can greatly improve your TypeScript programming experience. Remember that there are many more options available than what we've covered in this tutorial, so feel free to check the official TypeScript documentation for a complete list.