Complete Guide to tsconfig.js File for Beginners

What is tsconfig.js?

The `tsconfig.js` file is located in the root directory of a TypeScript project and defines the behavior of the TypeScript compiler (TSC) across the entire project. Through this file, you can set compile options, file inclusion/exclusion rules, path aliases, and more.

Basic Structure

The `tsconfig.js` file is written in JSON format. The basic structure is as follows:

{
  "compilerOptions": {
    // Compiler options
  },
  "include": [
    // Files or directories to include
  ],
  "exclude": [
    // Files or directories to exclude
  ],
  "files": [
    // List of explicitly included files
  ]
}

Explanation of Key Options

1. compilerOptions

The `compilerOptions` section defines various options that control the behavior of the TypeScript compiler. Let’s look at some key options:

• target: Sets the version of JavaScript to compile to. Examples: “es5”, “es6”.
• module: Specifies the module system. Examples: “commonjs”, “es6”.
• strict: Enables all strict type-checking options. Example: true.
• outDir: Specifies the directory where compiled files will be stored.
• rootDir: Sets the root directory of input files.
• baseUrl: Specifies the base directory for module resolution.
• paths: Sets module path aliases.

2. include

The `include` array specifies the file or directory patterns that the TypeScript compiler should include. Example:

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

3. exclude

The `exclude` array specifies the file or directory patterns that the compiler should ignore. Example:

"exclude": ["node_modules", "dist"]

4. files

The `files` array specifies individual files to be explicitly included. Example:

"files": ["src/index.ts"]

How to Set Path Aliases

As the project grows, module paths can become long and complex. Using path aliases can make the code cleaner and more readable. This can be set through the `paths` option.

1. Example of Setting Path Aliases

For example, to set the `src/app` directory as the alias `@app`, add `baseUrl` and `paths` to the `compilerOptions` in the `tsconfig.js` file as follows:

{
     "compilerOptions": {
       "target": "es6",
       "module": "commonjs",
       "strict": true,
       "outDir": "./dist",
       "rootDir": "./src",
       "baseUrl": "./",
       "paths": {
         "@app/*": ["src/app/*"],
         "@components/*": ["src/components/*"],
         "@utils/*": ["src/utils/*"]
       }
     },
     "include": ["src//*"],
     "exclude": ["node_modules", "dist"]
   }

2. Example of Using Aliases

Now, when importing modules within the `src/app` directory, you can use the alias instead of the absolute path:

import { MyComponent } from '@app/MyComponent';
   import { Utility } from '@utils/Utility';

Configuration Example

An example `tsconfig.js` file for a simple project is as follows:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./",
    "paths": {
      "@app/*": ["src/app/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src//*"],
  "exclude": ["node_modules", "dist"]
}

Conclusion

The `tsconfig.js` file is an essential component of a TypeScript project, and configuring it correctly can provide many benefits during development. Understanding and appropriately using the various options in this file allows you to fully leverage the powerful features of TypeScript. We hope this article has helped you understand the basic concepts and key options of the `tsconfig.js` file.

Even developers new to TypeScript can refer to this guide to set up the configuration file and start their projects. Proper configuration will significantly enhance development efficiency.