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.