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.

Practice

1. What is the main purpose of the tsconfig.json file in a TypeScript project?

easy

A. To run the TypeScript compiler manually

B. To list all JavaScript files in the project

C. To install TypeScript packages

D. To configure how TypeScript compiles the project

Solution

1. Step 1: Understand the role of tsconfig.json

   The tsconfig.json file tells TypeScript how to compile the project, including options and files.

2. Step 2: Compare options

   The other options describe unrelated tasks: listing files, installing packages, or running commands manually.

3. Final Answer:

   To configure how TypeScript compiles the project -> Option D

4. Quick Check:

   tsconfig.json = compile config [OK]

Hint: Remember tsconfig.json sets compile rules [OK]

Common Mistakes:

• Thinking tsconfig.json installs packages
• Confusing tsconfig.json with package.json
• Believing tsconfig.json runs commands

2. Which of the following is the correct way to specify the JavaScript version target in tsconfig.json?

easy

A. {
"target": "ES6"
}

B. {
"compilerOptions": {
"target": "ES6"
}
}

C. {
"compilerOptions": {
"version": "ES6"
}
}

D. {
"compilerOptions": {
"jsVersion": "ES6"
}
}

Solution

1. Step 1: Identify correct property for target

   The correct property inside compilerOptions to set JavaScript version is target.

2. Step 2: Check JSON structure

   The snippet with target nested inside compilerOptions is correct. The one with target directly at root misses the compilerOptions wrapper. The ones using version or jsVersion have wrong property names.

3. Final Answer:

   { "compilerOptions": { "target": "ES6" } } -> Option B

4. Quick Check:

   target inside compilerOptions = correct [OK]

Hint: Always put target inside compilerOptions [OK]

Common Mistakes:

• Placing target outside compilerOptions
• Using wrong property names like version or jsVersion
• Incorrect JSON nesting

3. Given this tsconfig.json snippet:

{
  "compilerOptions": {
    "outDir": "dist",
    "target": "ES5"
  },
  "include": ["src/**/*"]
}

Which files will TypeScript compile?

medium

A. All files inside the src folder and its subfolders

B. Only files directly inside the src folder

C. All files in the project except node_modules

D. Only files inside the dist folder

Solution

1. Step 1: Understand the include pattern

   The pattern src/**/* means all files in src and any subfolders recursively.

2. Step 2: Check outDir effect

   outDir sets where compiled files go (dist), but does not affect which files are compiled.

3. Final Answer:

   All files inside the src folder and its subfolders -> Option A

4. Quick Check:

   include src/**/* = all src files [OK]

Hint: include with **/* means all files recursively [OK]

Common Mistakes:

• Confusing outDir with input files
• Thinking include only covers top-level files
• Assuming node_modules are included by default

4. Identify the error in this tsconfig.json snippet:

{
  "compilerOptions": {
    "target": "ES6",
    "outDir": "build"
  },
  "include": ["src/**/*"],
  "exclude": "node_modules"
}

medium

A. "target" value ES6 is invalid

B. "outDir" cannot be "build"

C. "exclude" should be an array, not a string

D. "include" should be a string, not an array

Solution

1. Step 1: Check exclude property type

   The exclude property must be an array of strings, but here it is a single string.

2. Step 2: Validate other properties

   target with "ES6" is valid, outDir can be any folder name, and include is correctly an array.

3. Final Answer:

   "exclude" should be an array, not a string -> Option C

4. Quick Check:

   exclude must be array [OK]

Hint: exclude always needs brackets [] [OK]

Common Mistakes:

• Using string instead of array for exclude
• Thinking ES6 is invalid target
• Confusing include and exclude types

5. You want to compile only TypeScript files inside the app folder but exclude test files ending with .spec.ts. Which tsconfig.json configuration achieves this?

hard

A. {
"include": ["app/**/*.ts"],
"exclude": ["**/*.spec.ts"]
}

B. {
"include": ["app/**/*.ts", "!app/**/*.spec.ts"]
}

C. {
"include": ["app/**/*.ts"],
"exclude": ["app/**/*.test.ts"]
}

D. {
"include": ["app/**/*.ts"],
"exclude": ["app/*.spec.ts"]
}

Solution

1. Step 1: Understand include and exclude patterns

   To compile files in app, include app/**/*.ts. To exclude test files ending with .spec.ts, exclude **/*.spec.ts globally.

2. Step 2: Evaluate options

   { "include": ["app/**/*.ts"], "exclude": ["app/*.spec.ts"] } excludes only top-level test files directly in app, missing those in subfolders. { "include": ["app/**/*.ts", "!app/**/*.spec.ts"] } uses negation in include, which is invalid. { "include": ["app/**/*.ts"], "exclude": ["app/**/*.test.ts"] } excludes .test.ts files, not .spec.ts.

3. Step 3: Choose best practice

   { "include": ["app/**/*.ts"], "exclude": ["**/*.spec.ts"] } correctly includes all .ts files in app and excludes all .spec.ts files anywhere, ensuring test files are excluded.

4. Final Answer:

   Include app/**/*.ts and exclude **/*.spec.ts -> Option A

5. Quick Check:

   exclude **/*.spec.ts filters test files [OK]

Hint: Use exclude with **/*.spec.ts to skip test files [OK]

Common Mistakes:

• Using negation inside include array
• Excluding wrong test file patterns
• Not excluding test files at all