tsconfig.json Configuration Basics in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript compilation command?

Given this tsconfig.json file, what will be the output when running tsc in the same directory?

Typescript

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

A TypeScript files in the src folder are compiled to ES5 JavaScript and saved in the dist folder with CommonJS modules.

B Compilation fails because outDir must be inside src folder.

C TypeScript files are compiled to ES6 JavaScript and saved in the src folder with ES modules.

D TypeScript files are compiled but output is saved in the root directory.

💡 Hint

Check the meaning of target, module, and outDir in compilerOptions.

The target option sets the JavaScript version to ES5. The module option sets the module system to CommonJS. The outDir option specifies the output folder for compiled files, here 'dist'. The include option tells the compiler to include all files inside the 'src' folder.

❓ Predict Output

intermediate

What error does this tsconfig.json cause?

Consider this tsconfig.json snippet. What error will the TypeScript compiler show?

Typescript

{
  "compilerOptions": {
    "target": "ES6",
    "module": "amd",
    "strict": true
  },
  "exclude": ["node_modules"]
}

A Error: 'exclude' cannot be used with 'include'.

B Error: 'strict' is not a valid compiler option.

C No error; compilation succeeds with ES6 target and AMD modules.

D Error: 'module' option 'amd' is not supported with target ES6.

💡 Hint

Check if 'strict' is a valid option and if AMD modules work with ES6 target.

The strict option enables strict type checking and is valid. AMD modules are supported with ES6 target. The exclude option is valid and excludes 'node_modules' from compilation. So no error occurs.

🔧 Debug

advanced

Why does this tsconfig.json cause a runtime error?

This tsconfig.json compiles without errors, but the output JavaScript throws an error at runtime. Why?

Typescript

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "lib": ["DOM", "ES2015"],
    "outDir": "build"
  },
  "include": ["app/**/*"]
}

A The 'include' pattern is incorrect, so no files are compiled.

B The 'lib' option is missing 'DOM', causing missing browser APIs at runtime.

C The 'outDir' folder 'build' does not exist, causing runtime errors.

D Using ESNext modules with ES5 target causes incompatible module syntax in output, leading to runtime errors.

💡 Hint

Think about how module syntax and target version affect the output JavaScript.

When targeting ES5 but using ESNext modules, the output uses import/export syntax which ES5 environments do not support natively, causing runtime errors.

📝 Syntax

advanced

Which tsconfig.json option is invalid here?

Identify the invalid option in this tsconfig.json:

Typescript

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "allowJs": true,
    "outFile": "dist/app.js",
    "rootDir": "src",
    "noEmitOnError": false
  }
}

A "outFile" cannot be used with "module": "commonjs".

B "allowJs" must be false when "target" is ES2020.

C "rootDir" must be inside "outFile" directory.

D "noEmitOnError" must be true to emit files.

💡 Hint

Check compatibility between 'outFile' and 'module' options.

The outFile option can only be used when the module system is set to 'none' or 'system'. It is invalid with 'commonjs' modules.

🚀 Application

expert

How many files will be compiled with this tsconfig.json?

Given this tsconfig.json and the project structure below, how many TypeScript files will be compiled?

Typescript

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs"
  },
  "include": ["src/**/*.ts", "tests/**/*.ts"],
  "exclude": ["src/legacy/**"]
}

Project structure:
- src/app.ts
- src/utils.ts
- src/legacy/old.ts
- tests/test1.ts
- tests/helpers/test2.ts
- README.md

A 5 files

B 4 files

C 3 files

D 6 files

💡 Hint

Count files matching include patterns but not excluded.

The include patterns select all .ts files in 'src' and 'tests' folders. The exclude pattern removes all files in 'src/legacy'. So 'src/app.ts', 'src/utils.ts', 'tests/test1.ts', and 'tests/helpers/test2.ts' are included. 'src/legacy/old.ts' is excluded. Total 4 files.

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