Why type narrowing is needed in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code with type narrowing?

Look at the code below. What will it print when run?

Typescript

function printLength(x: string | number) {
  if (typeof x === 'string') {
    console.log(x.length);
  } else {
    console.log(x.toFixed(2));
  }
}
printLength('hello');
printLength(3.14159);

A 5 and 3.14

B undefined and 3.14

C 5 and 3.14159

D Error at compile time

💡 Hint

Think about how TypeScript knows what methods are safe to call on x.

Type narrowing lets TypeScript know if x is a string or number inside the if and else blocks. So it safely calls length for strings and toFixed for numbers.

🧠 Conceptual

intermediate

Why do we need type narrowing in TypeScript?

Choose the best reason why type narrowing is important in TypeScript.

A To allow calling properties or methods safely on union types by knowing the exact type at runtime

B To make the code run faster by removing type checks

C To convert all types to strings automatically

D To disable type checking for certain variables

💡 Hint

Think about how TypeScript prevents errors when a variable can be more than one type.

Type narrowing helps TypeScript understand the exact type of a variable at a certain point, so it can allow safe access to properties or methods that only exist on that type.

🔧 Debug

advanced

What error does this TypeScript code raise without type narrowing?

Look at this code. What error will TypeScript show?

Typescript

function doubleValue(x: string | number) {
  return x * 2;
}

A Error: Missing return statement

B No error, returns doubled value for both types

C Error: Operator '*' cannot be applied to types 'string | number' and 'number'.

D Error: Cannot multiply by 2

💡 Hint

Think about what happens when you try to multiply a string by a number in TypeScript.

TypeScript does not allow using '*' on a union type without knowing the exact type. It raises an error because x could be a string, and multiplying a string by a number is invalid.

📝 Syntax

advanced

Which option correctly narrows the type to string in this code?

Choose the correct way to narrow the type of value to string before calling toUpperCase().

Typescript

function shout(value: string | number) {
  // Narrow value to string here
  console.log(value.toUpperCase());
}

A if (value instanceof String) { console.log(value.toUpperCase()); }

B if (value === 'string') { console.log(value.toUpperCase()); }

C if (typeof value === 'number') { console.log(value.toUpperCase()); }

D if (typeof value === 'string') { console.log(value.toUpperCase()); }

💡 Hint

Remember how to check the type of a variable in JavaScript/TypeScript.

The typeof operator returns the type as a string. Checking typeof value === 'string' narrows the type correctly. instanceof String checks for String objects, not string primitives.

🚀 Application

expert

What is the output of this TypeScript code using type narrowing with custom type guard?

Consider this code with a custom type guard function. What will it print?

Typescript

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

function move(pet: Fish | Bird) {
  if (isFish(pet)) {
    return 'Fish swims';
  } else {
    return 'Bird flies';
  }
}

console.log(move({ swim: () => {} }));
console.log(move({ fly: () => {} }));

A "Bird flies" followed by "Fish swims"

B "Fish swims" followed by "Bird flies"

C Runtime error because of wrong type assertion

D Both calls return "Fish swims"

💡 Hint

Look at how the custom type guard works and what it checks.

The isFish function checks if the object has a swim method. The first object has swim, so it returns "Fish swims". The second has fly, so it returns "Bird flies".