Type narrowing with typeof in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of type narrowing with typeof in conditional

What is the output of this TypeScript code when run with input = 42?

Typescript

function checkType(input: string | number) {
  if (typeof input === 'string') {
    return input.toUpperCase();
  } else {
    return input + 10;
  }
}
console.log(checkType(42));

A 42

B TypeError at runtime

C 52

D undefined

💡 Hint

Think about what happens when input is a number and you add 10.

The function checks if input is a string. Since 42 is a number, it adds 10 to it, resulting in 52.

❓ Predict Output

intermediate

Type narrowing effect on union types

What will this code output when value = true?

Typescript

function process(value: string | boolean) {
  if (typeof value === 'boolean') {
    return value ? 'Yes' : 'No';
  } else {
    return value.length;
  }
}
console.log(process(true));

A true

B TypeError: value.length is not a function

C "true"

D "Yes"

💡 Hint

Check the typeof condition and what happens for booleans.

Since value is boolean true, the function returns 'Yes'.

🔧 Debug

advanced

Identify the runtime error caused by incorrect type narrowing

What error does this code produce when data = 123?

Typescript

function formatData(data: string | number) {
  if (typeof data === 'string') {
    return data.trim();
  } else if (typeof data === 'number') {
    return data.toFixed(2);
  }
  return data;
}
console.log(formatData(123));

A undefined

B 123.00

C SyntaxError

D TypeError: data.trim is not a function

💡 Hint

Check the typeof checks and methods called on each type.

The code correctly narrows the type and calls toFixed on number 123, outputting '123.00'.

❓ Predict Output

advanced

Output when typeof narrowing misses a case

What is the output of this code when input = null?

Typescript

function checkInput(input: string | null) {
  if (typeof input === 'string') {
    return input.length;
  } else {
    return 'No string';
  }
}
console.log(checkInput(null));

A "No string"

B TypeError: Cannot read property 'length' of null

C 0

D null

💡 Hint

Remember typeof null is 'object', not 'string'.

Since input is null, typeof input is 'object', so the else branch runs returning 'No string'.

🧠 Conceptual

expert

Why typeof narrowing is safer than direct property access

Why is using typeof to narrow types safer than directly accessing properties without checks in TypeScript?

A Because typeof checks prevent runtime errors by ensuring the variable is the expected type before accessing properties or methods.

B Because typeof changes the variable type permanently in the program.

C Because direct property access always works regardless of type.

D Because typeof automatically converts all types to strings.

💡 Hint

Think about what happens if you try to call a string method on a number.

Using typeof ensures the code only accesses properties or methods valid for that type, avoiding runtime errors.