What is the use of tsconfig.json file in TypeScript?

The tsconfig.json file plays a crucial role in TypeScript projects, guiding the TypeScript compiler on how to compile TypeScript code. Specifically, it contains a series of compilation options and project settings that allow developers to configure the transformation of TypeScript code into JavaScript.

Main Purposes

1. Specify compiler options:

   • 'target' specifies the version of JavaScript to compile to (e.g., ES5, ES6/ES2015, etc.).
   • 'module' specifies the module system to use (e.g., CommonJS, AMD, ES6, etc.).
   • 'strict' enables all strict type-checking options, helping to write more robust code.
   • 'outDir' and 'outFile' are used to specify the output directory and file.

2. Include and exclude files:

   • 'include' and 'exclude' arrays define which files or directories to include or exclude from compilation.
   • The 'files' attribute directly lists specific files to include in the compilation.

3. Support project references:

   • 'references' sets dependencies between projects, facilitating the management of multiple sub-projects within large applications.

Practical Example

Suppose you are developing a Node.js application where you want TypeScript to compile to CommonJS modules suitable for Node.js with a target of ES2018. For this scenario, the tsconfig.json configuration might look like this:

json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2018",
    "outDir": "./dist",
    "strict": true
  },
  "include": [
    "src/**/*"
  ]
}

In this example:

• 'module': 'commonjs' ensures TypeScript files are compiled into CommonJS modules, which is the default module system supported by Node.js.
• 'target': 'ES2018' indicates the generated JavaScript code conforms to the ES2018 standard.
• 'outDir': './dist' specifies that compiled files will be placed in the 'dist' folder under the project root directory.
• 'strict': true enables all strict type-checking options, helping to catch potential errors during development.
• 'include': ['src/**/*'] specifies that only files under the 'src' directory will be compiled.

By configuring it this way, you can ensure the TypeScript project's compilation behavior meets your specific requirements and results in a clearer, more organized project structure.