tsconfig.json, Compiler Options, and Project Structure - Textnotes

tsconfig.json, Compiler Options, and Project Structure

Learn how TypeScript configuration works using tsconfig.json. This tutorial explains important compiler options, strict mode, and how to organize source and output directories for real-world TypeScript projects.

1. What Is tsconfig.json

The tsconfig.json file is the configuration file for a TypeScript project. It tells the TypeScript compiler how to compile the code and which rules to enforce.

When a tsconfig.json file is present in a folder, TypeScript treats that folder as the root of the project.

Without tsconfig.json, the compiler uses default settings, which is not recommended for real applications.

Creating tsconfig.json


tsc --init

This command generates a default tsconfig.json file.

2. Important Compiler Options

Compiler options define how TypeScript behaves during compilation. They are placed inside the compilerOptions object.

Commonly Used Compiler Options

target

Specifies the JavaScript version for the output.


"target": "ES6"

module

Defines the module system used in output JavaScript.


"module": "commonjs"

outDir

Specifies where compiled JavaScript files will be placed.


"outDir": "./dist"

rootDir

Specifies the root folder of TypeScript source files.


"rootDir": "./src"

removeComments

Removes comments from output JavaScript.


"removeComments": true

sourceMap

Generates source map files for debugging.


"sourceMap": true

Example tsconfig.json


{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"rootDir": "./src",
"outDir": "./dist",
"sourceMap": true,
"removeComments": true
}
}

3. Strict Mode and Its Benefits

Strict mode is a set of compiler rules that enforce stronger type checking. It helps catch common programming errors during development.

Enabling Strict Mode


"strict": true

What Strict Mode Includes

  1. No implicit any
  2. Strict null checks
  3. Strict function type checking
  4. Strict property initialization

Example Without Strict Mode


let username;
username = "Muni";
username = 10;

No error occurs.

Example With Strict Mode


let username: string;
username = "Muni";
username = 10;

The compiler throws an error, preventing a potential bug.

Benefits of Strict Mode

Strict mode improves code reliability, reduces runtime errors, and enforces best coding practices. It is highly recommended for enterprise and production applications.

4. Source and Output Directories

Separating source and compiled files is a best practice in TypeScript projects.

Recommended Project Structure


project/
├── src/
│ ├── index.ts
│ ├── user.ts
│ └── service.ts
├── dist/
│ ├── index.js
│ ├── user.js
│ └── service.js
├── tsconfig.json
└── package.json

How It Works

  1. Developers write code in the src folder.
  2. TypeScript compiler reads files from rootDir.
  3. Compiled JavaScript is generated in outDir.

Compile the Project


tsc

This compiles all TypeScript files from the source directory and outputs JavaScript files into the output directory.

Conclusion

The tsconfig.json file is the backbone of a TypeScript project. Proper configuration ensures clean builds, strict error checking, and a scalable project structure. Understanding compiler options and strict mode is essential for professional TypeScript development.