tsconfig.json Configuration Basics in Typescript - Step-by-Step Execution

Concept Flow - tsconfig.json Configuration Basics

Start: Create tsconfig.json

↓

Add compilerOptions

↓

Set target, module, strict, etc.

↓

Add include/exclude files

↓

Run tsc compiler

↓

Compile or show errors

↓

End

This flow shows how tsconfig.json is created and configured to control TypeScript compilation.

Execution Sample

Typescript

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true
  },
  "include": ["src/**/*"]
}

A simple tsconfig.json that sets ES6 target, commonjs module, strict mode, and includes all files in src folder.

Execution Table

Step	Action	Config Key	Value	Effect
1	Create tsconfig.json file	-	-	File created with default empty content
2	Add compilerOptions object	compilerOptions	{}	Prepare to set compiler options
3	Set target option	target	"ES6"	Output JavaScript will use ES6 features
4	Set module option	module	"commonjs"	Use CommonJS module system for imports/exports
5	Enable strict mode	strict	true	Enable strict type checking rules
6	Add include array	include	["src/**/*"]	Only files in src folder are compiled
7	Run tsc compiler	-	-	Compiler reads tsconfig.json and compiles accordingly
8	Compilation success or errors	-	-	Output JS files or show errors based on config

💡 Compilation ends after processing all included files with specified options

Variable Tracker

Config Key	Initial	After Step 3	After Step 4	After Step 5	After Step 6	Final
compilerOptions	undefined	{"target":"ES6"}	{"target":"ES6","module":"commonjs"}	{"target":"ES6","module":"commonjs","strict":true}	{"target":"ES6","module":"commonjs","strict":true}	{"target":"ES6","module":"commonjs","strict":true}
include	undefined	undefined	undefined	undefined	["src/**/*"]	["src/**/*"]

Key Moments - 3 Insights

Why do we need the "include" field in tsconfig.json?

The "include" field tells the compiler which files to compile. Without it, the compiler might compile all files or none, depending on defaults. See execution_table step 6.

What does setting "strict": true do?

It enables strict type checking rules, making TypeScript catch more errors early. This is shown in execution_table step 5.

What happens if we omit the "target" option?

The compiler uses a default JavaScript version (usually ES3 or ES5), which might not support newer features. See variable_tracker for how target is set.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of "module" after step 4?

A true

B "ES6"

C "commonjs"

D undefined

💡 Hint

Check the 'Value' column at step 4 in execution_table.

At which step does the compilerOptions object first get a property set?

A Step 2

B Step 3

C Step 5

D Step 6

💡 Hint

Look at execution_table where 'target' is set inside compilerOptions.

If we remove the "include" field, what changes in the compilation process?

A Compiler compiles all files by default

B Compiler compiles no files

C Compiler throws an error

D Compiler only compiles files in node_modules

💡 Hint

Refer to key_moments about the role of 'include' in execution_table step 6.

Concept Snapshot

tsconfig.json controls TypeScript compilation.
Use "compilerOptions" to set target JS version, module system, and strictness.
Use "include" to specify files to compile.
Run tsc to compile using this config.
Missing options use defaults.
Strict mode helps catch errors early.

Full Transcript

This visual trace shows how tsconfig.json is created and configured step-by-step. First, the file is created empty. Then, the compilerOptions object is added. Next, target is set to ES6, meaning the output JavaScript will use ES6 features. The module system is set to commonjs for imports and exports. Strict mode is enabled to catch more errors. The include field is added to specify that only files in the src folder are compiled. Finally, the TypeScript compiler reads this config and compiles the files accordingly, producing JavaScript or showing errors. Variables like compilerOptions and include change as options are added. Key moments include why include is important, what strict mode does, and what happens if target is missing. The quizzes test understanding of these steps and values. This helps beginners see how tsconfig.json controls the TypeScript build process.