typeof type guards in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of typeof type guard with union types

What is the output of this TypeScript code when calling checkType(42)?

Typescript

function checkType(value: string | number) {
  if (typeof value === 'string') {
    return `String: ${value.toUpperCase()}`;
  } else {
    return `Number: ${value.toFixed(1)}`;
  }
}

console.log(checkType(42));

A "Number: 42.0"

B "String: 42"

C Compilation error

D TypeError at runtime

💡 Hint

Think about how typeof narrows the type inside the if block.

The typeof check narrows the union type. Since 42 is a number, the else block runs, calling toFixed(1) which formats the number with one decimal place.

❓ Predict Output

intermediate

Using typeof type guard with unknown type

What will this code output when processValue(true) is called?

Typescript

function processValue(value: unknown) {
  if (typeof value === 'boolean') {
    return value ? 'Yes' : 'No';
  }
  return 'Not a boolean';
}

console.log(processValue(true));

A "true"

B "Yes"

C "Not a boolean"

D Runtime error

💡 Hint

typeof narrows unknown to boolean inside the if.

The typeof check confirms the value is boolean, so the ternary returns 'Yes' for true.

❓ Predict Output

advanced

Effect of typeof type guard on union with object

What is the output of this code snippet?

Typescript

function describe(input: string | { name: string }) {
  if (typeof input === 'string') {
    return `String: ${input}`;
  } else {
    return `Object with name: ${input.name}`;
  }
}

console.log(describe({ name: 'Alice' }));

A Compilation error

B "String: [object Object]"

C "Object with name: Alice"

D TypeError: Cannot read property 'name' of undefined

💡 Hint

typeof returns 'object' for objects, so else block runs.

Since input is an object, the else block runs and accesses input.name safely.

❓ Predict Output

advanced

typeof type guard with nested conditions

What will this code print when formatValue(false) is called?

Typescript

function formatValue(val: string | number | boolean) {
  if (typeof val === 'string') {
    return val.toUpperCase();
  } else if (typeof val === 'number') {
    return val.toFixed(2);
  } else {
    return val ? 'True' : 'False';
  }
}

console.log(formatValue(false));

A Runtime error

B "false"

C "0.00"

D "False"

💡 Hint

Check the order of typeof checks and the final else block.

The value is boolean false, so the final else block runs and returns 'False'.

🧠 Conceptual

expert

Why typeof type guards cannot distinguish arrays

Why does typeof fail to distinguish arrays from objects in TypeScript?

A Because typeof returns 'object' for both arrays and objects, so it cannot differentiate them.

B Because arrays are primitive types and typeof returns 'array' for them.

C Because TypeScript disables typeof checks on arrays for performance reasons.

D Because arrays have a special typeof value 'array' that is not recognized by TypeScript.

💡 Hint

Think about what typeof returns for arrays in JavaScript.

In JavaScript and TypeScript, typeof returns 'object' for arrays, so typeof cannot distinguish arrays from plain objects.