tsconfig.json Configuration Basics in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to specify the root directory for TypeScript source files.

Typescript

{
  "compilerOptions": {
    "rootDir": "[1]"
  }
}

Drag options to blanks, or click blank then click option'

Asrc

Bdist

Clib

Dbuild

Attempts:

3 left

💡 Hint

Common Mistakes

Setting rootDir to the output folder like dist instead of the source folder.

The rootDir option tells TypeScript where your source files are located. Usually, this is the src folder.

2fill in blank

medium

Complete the code to enable strict type checking in the TypeScript compiler.

Typescript

{
  "compilerOptions": {
    "strict": [1]
  }
}

Drag options to blanks, or click blank then click option'

A"true"

Bfalse

Ctrue

D"false"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around boolean values like "true" or "false".

The strict option is a boolean that enables strict type checking. It should be set to true without quotes.

3fill in blank

hard

Fix the error in the code by completing the module resolution strategy.

Typescript

{
  "compilerOptions": {
    "moduleResolution": "[1]"
  }
}

Drag options to blanks, or click blank then click option'

ANode

BClassic

Cclassic

Dnode

Attempts:

3 left

💡 Hint

Common Mistakes

Using capitalized values like "Node" or "Classic" which cause errors.

The moduleResolution option is case-sensitive and should be "node" in lowercase to use Node.js style resolution.

4fill in blank

hard

Fill both blanks to configure the output directory and enable source maps.

Typescript

{
  "compilerOptions": {
    "outDir": "[1]",
    "sourceMap": [2]
  }
}

Drag options to blanks, or click blank then click option'

Adist

Btrue

Cfalse

Dbuild

Attempts:

3 left

💡 Hint

Common Mistakes

Setting sourceMap to a string instead of a boolean.

Using build instead of dist if the project expects dist.

The outDir option sets the folder for compiled JavaScript files, commonly dist. The sourceMap option enables source maps when set to true.

5fill in blank

hard

Fill all three blanks to configure target, module, and allowJs options.

Typescript

{
  "compilerOptions": {
    "target": "[1]",
    "module": "[2]",
    "allowJs": [3]
  }
}

Drag options to blanks, or click blank then click option'

AES5

Bcommonjs

Cfalse

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase es5 instead of uppercase ES5 for target.

Putting quotes around boolean values like "true" or "false".

The target option sets the JavaScript version output, commonly ES5. The module option defines the module system, often commonjs. The allowJs option enables compiling JavaScript files when set to true.

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