TypeScript Strict Mode and Why It Matters - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable strict mode in a TypeScript configuration file.

Typescript

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

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

AnoImplicitAny

Bstrict

Ctarget

Dmodule

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing options that enable only some strict checks instead of all.

Confusing 'target' or 'module' with strict mode settings.

Setting "strict": true in tsconfig.json enables all strict type-checking options in TypeScript.

2fill in blank

medium

Complete the code to declare a variable that cannot be assigned null or undefined in strict mode.

Typescript

let username: string = [1];

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

Anull

Bundefined

C"Alice"

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning null or undefined to a non-nullable type.

Using a number instead of a string.

In strict mode, a variable of type string cannot be assigned null or undefined. Assigning a string literal like "Alice" is correct.

3fill in blank

hard

Fix the error by completing the function parameter type to avoid implicit any in strict mode.

Typescript

function greet(name: [1]) {
  console.log(`Hello, ${name}!`);
}

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

Astring

Bany

Cnumber

Dunknown

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the type as implicit any.

Using 'any' which disables strict type checking.

In strict mode, parameters must have explicit types. Using string for name avoids implicit any errors.

4fill in blank

hard

Fill both blanks to create a function that returns a number or undefined, using strict null checks.

Typescript

function findIndex(arr: number[], target: number): [1] {
  const index = arr.indexOf(target);
  return index [2] -1 ? index : undefined;
}

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

Anumber | undefined

B!==

C==

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using '==' instead of '!==' causing loose comparison.

Returning just 'number' without undefined.

The function returns number | undefined to reflect possible absence of the target. The condition uses !== to check if index is not -1.

5fill in blank

hard

Fill all three blanks to define a strict mode interface and a function using it.

Typescript

interface User {
  id: [1];
  name: [2];
  email?: [3];
}

function printUser(user: User) {
  console.log(`User: ${user.name} (ID: ${user.id})`);
}

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

Anumber

Bstring

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong types like boolean for id or name.

Omitting optional property syntax for email.

The id is a number, name is a string, and email is an optional string. This matches strict typing rules.