TypeScript Strict Mode and Why It Matters - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output when strict mode is enabled?

Consider this TypeScript code with strict mode enabled. What will be the output when compiled and run?

Typescript

function greet(name: string) {
  return `Hello, ${name.toUpperCase()}`;
}

console.log(greet(undefined as any));

A TypeError at runtime: Cannot read property 'toUpperCase' of undefined

B Hello, UNDEFINED

C Compilation error: Argument of type 'undefined' is not assignable to parameter of type 'string'.

D Hello, undefined

💡 Hint

'any' bypasses type checks, even in strict mode.

The 'as any' cast bypasses TypeScript's type checking, so the code compiles. At runtime, 'name' is undefined, causing a TypeError on toUpperCase().

🧠 Conceptual

intermediate

Why does strictNullChecks matter in TypeScript strict mode?

Which statement best explains the role of the strictNullChecks option in TypeScript strict mode?

A It automatically converts null and undefined to empty strings.

B It allows null and undefined to be assigned to any type without errors.

C It disables all type checking related to null and undefined.

D It requires explicit handling of null and undefined values, preventing accidental runtime errors.

💡 Hint

Think about how strictNullChecks changes how null and undefined are treated in types.

strictNullChecks forces you to explicitly check or handle null and undefined, reducing bugs caused by unexpected null values.

🔧 Debug

advanced

Identify the error caused by strict mode

What error will this TypeScript code produce when strict mode is enabled?

Typescript

let data: { id: number; name?: string } = { id: 1 };

console.log(data.name.length);

A Runtime error: Cannot read property 'length' of undefined.

B Compilation error: Object is possibly 'undefined'.

C No error, outputs undefined.

D Compilation error: Property 'length' does not exist on type 'string | undefined'.

💡 Hint

Check how optional properties are treated in strict mode.

Because 'name' is optional, it might be undefined. Strict mode requires you to check before accessing 'length'.

📝 Syntax

advanced

Which code snippet correctly uses strict mode with non-null assertion?

Given strict mode is enabled, which option correctly accesses a possibly undefined variable without error?

Typescript

let user: { email?: string } = {};
// Access user.email length safely

A console.log(user.email!.length);

B console.log(user.email.length);

C console.log(user.email?.length);

D console.log(user.email.length!);

💡 Hint

Non-null assertion operator tells TypeScript the value is not null or undefined.

Option A uses the non-null assertion operator (!) correctly to tell TypeScript that user.email is not undefined here.

🚀 Application

expert

How many errors will strict mode report in this code?

Count the number of TypeScript compilation errors when strict mode is enabled for this code:

Typescript

function process(input: string | null) {
  console.log(input.toUpperCase());
  let count: number = null;
  let value: any = 5;
  let result: number = value;
}

A 1 error

B 3 errors

C 2 errors

D No errors

💡 Hint

Check each line for type mismatches or unsafe operations under strict mode.

1) input.toUpperCase() is unsafe because input can be null. 2) Assigning null to number is invalid. No error on assigning any to number, as any is assignable to any type. Total: 2 errors.