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.