Welcome back! I am Mihir, and in this lesson we will understand tsconfig.json.

When you start writing TypeScript in real projects, you should not compile files one by one forever. A TypeScript project needs a configuration file that tells the compiler how to behave.

That file is called:

tsconfig.json

What is tsconfig.json?

tsconfig.json is the configuration file for the TypeScript compiler.

It tells TypeScript:

• Which files to compile
• Which JavaScript version to output
• Where to put compiled files
• How strict type checking should be
• Which module system to use
• Which folders to include or exclude

Think of it as the control panel for your TypeScript project.

Create tsconfig.json

Inside your TypeScript project, run:

npx tsc --init

This creates:

tsconfig.json

Now instead of compiling one file:

npx tsc index.ts

You can run:

npx tsc

TypeScript will read tsconfig.json automatically.

A Simple Beginner tsconfig.json

Here is a clean beginner-friendly version:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Let us understand each part.

compilerOptions

compilerOptions contains the main TypeScript compiler settings.

{
  "compilerOptions": {}
}

Most important TypeScript settings go inside this object.

target

"target": "ES2020"

target decides which JavaScript version TypeScript should output.

Example TypeScript:

const greet = (name: string) => `Hello, ${name}`;

If target is old JavaScript, TypeScript may convert modern syntax into older syntax.

Common values:

For learning, ES2020 is a good choice.

module

"module": "CommonJS"

module decides how imports and exports are compiled.

For Node.js beginner projects, CommonJS is common.

export function add(a: number, b: number): number {
  return a + b;
}

In modern frontend projects like Next.js or Vite, you may see:

"module": "ESNext"

Do not worry too much at the beginning. Frameworks usually create this config for you.

rootDir

"rootDir": "src"

rootDir tells TypeScript where your source files live.

Recommended structure:

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

You write TypeScript inside src.

outDir

"outDir": "dist"

outDir tells TypeScript where to place compiled JavaScript.

Input:

src/index.ts

Output:

dist/index.js

This keeps your project clean by separating source code from build output.

strict

"strict": true

This is one of the most important options.

strict: true enables strict type checking.

It helps catch more mistakes, especially around:

• Missing types
• null
• undefined
• Unsafe function parameters
• Incorrect object usage

Example:

function greet(name) {
  return name.toUpperCase();
}

With strict mode, TypeScript warns because name has an implicit any type.

Better:

function greet(name: string): string {
  return name.toUpperCase();
}

For beginners, strict mode may feel hard at first, but it teaches good habits.

esModuleInterop

"esModuleInterop": true

This option makes it easier to import certain CommonJS packages.

You may see code like:

import express from "express";

Some packages were originally built using older module patterns. esModuleInterop helps TypeScript work better with them.

For most projects, keeping it true is fine.

forceConsistentCasingInFileNames

"forceConsistentCasingInFileNames": true

This catches file name casing mistakes.

Example:

import { user } from "./User";

But the actual file is:

user.ts

This might work on Windows but break on Linux servers.

This option helps avoid that problem.

skipLibCheck

"skipLibCheck": true

This skips type checking of declaration files inside dependencies.

It can make compilation faster and avoids errors from third-party library type files.

Most projects use this option.

include

"include": ["src"]

This tells TypeScript which files to include.

If you write:

"include": ["src"]

TypeScript checks files inside:

src/

exclude

"exclude": ["node_modules"]

This tells TypeScript what to ignore.

You should usually exclude:

node_modules
dist

Example:

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

Recommended Project Workflow

Create this structure:

typescript-practice/
├── src/
│   └── index.ts
├── dist/
├── package.json
└── tsconfig.json

In src/index.ts:

type User = {
  name: string;
  email: string;
};

const user: User = {
  name: "Mihir",
  email: "mihir@example.com",
};

console.log(user.name);

Run:

npx tsc

Then run:

node dist/index.js

Add Scripts

In package.json:

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

Now use:

npm run build
npm run start

This is cleaner and closer to real project style.

Common Beginner Mistakes

Compiling one file ignores some config behavior

Prefer:

npx tsc

instead of:

npx tsc src/index.ts

when using tsconfig.json.

Forgetting rootDir and outDir

Without outDir, JavaScript files may appear beside your TypeScript files.

This can make the project messy.

Turning off strict too early

It is tempting to write:

"strict": false

But strict mode helps you learn correct TypeScript habits.

What You've Learned

You now understand:

• What tsconfig.json is
• How to create it with npx tsc --init
• What compilerOptions means
• How target, module, rootDir, and outDir work
• Why strict mode matters
• How to use include and exclude
• A clean beginner TypeScript project structure

What's Next?

In the next lesson, we will learn Type Annotations.

You will understand how to explicitly tell TypeScript the type of variables, function parameters, return values, arrays, and objects.

Need Help?

• Have questions, confusion, or want to know more? Contact me

tsconfig.json looks intimidating at first, but you only need a few options to start confidently.