tsconfig.json Configuration Basics in Typescript - Mini Project: Build & Apply

tsconfig.json Configuration Basics

📖 Scenario: You are starting a new TypeScript project and need to set up the tsconfig.json file to control how the TypeScript compiler works.

🎯 Goal: Create a basic tsconfig.json file with essential compiler options to compile your TypeScript code correctly.

📋 What You'll Learn

Create a tsconfig.json file with a compilerOptions section

Set the target option to ES2020

Set the module option to ESNext

Enable strict mode

Set the outDir option to ./dist

💡 Why This Matters

🌍 Real World

Setting up tsconfig.json is essential for any TypeScript project to control how your code is compiled and to catch errors early.

💼 Career

Understanding tsconfig.json helps you configure projects correctly in professional TypeScript development environments.

1

Create the basic tsconfig.json structure

Create a tsconfig.json file with an empty compilerOptions object like this: { "compilerOptions": {} }

Typescript

{
  "compilerOptions": {
    // Your code here
  }
}

Need a hint?

Start by creating the JSON file with an empty compilerOptions object.

2

Add target and module options

Inside compilerOptions, add "target": "ES2020" and "module": "ESNext" to specify the JavaScript version and module system.

Typescript

{
  "compilerOptions": {
    // Add target and module here
  }
}

Need a hint?

Add both options inside the compilerOptions object separated by commas.

3

Enable strict mode

Add "strict": true inside compilerOptions to enable all strict type-checking options.

Typescript

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    // Add strict mode here
  }
}

Need a hint?

Add the strict option with value true inside compilerOptions.

4

Set output directory

Add "outDir": "./dist" inside compilerOptions to specify the folder where compiled JavaScript files will be saved.

Typescript

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    // Add outDir here
  }
}

Need a hint?

Add the outDir option with the value './dist' inside compilerOptions.