The in operator narrowing in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of type narrowing with 'in' operator

What is the output of this TypeScript code when run with Node.js (ignoring type errors)?

Typescript

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

function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    return animal.swim();
  } else {
    return animal.fly();
  }
}

const fish: Fish = { swim: () => "Swimming" };
const bird: Bird = { fly: () => "Flying" };

console.log(move(fish));
console.log(move(bird));

A Runtime error: animal.swim is not a function

B "Flying" followed by "Swimming"

C "Swimming" followed by "Flying"

D Compilation error due to type mismatch

💡 Hint

The 'in' operator checks if a property exists on the object, helping TypeScript narrow the type.

The 'in' operator narrows the union type Fish | Bird to Fish when 'swim' is present, so animal.swim() runs. Otherwise, it calls animal.fly(). The output is 'Swimming' then 'Flying'.

🧠 Conceptual

intermediate

Understanding 'in' operator narrowing with optional properties

Given the types below, which statement about the 'in' operator narrowing is true?

Typescript

type A = { x?: number };
type B = { y: string };

function test(obj: A | B) {
  if ('x' in obj) {
    // What can we say about obj here?
  }
}

A Inside the if block, obj is narrowed to type A, but 'x' may still be undefined.

B Inside the if block, obj is guaranteed to have property 'x' defined and not undefined.

C Inside the if block, obj is narrowed to type B because 'x' is optional.

D The 'in' operator cannot be used to narrow types with optional properties.

💡 Hint

The 'in' operator checks if the property exists, but optional properties may be undefined.

The 'in' operator narrows obj to type A because only A has property 'x'. However, since 'x' is optional, it may still be undefined inside the block.

🔧 Debug

advanced

Why does this 'in' operator narrowing fail?

Consider this TypeScript code snippet. Why does the compiler complain about accessing 'fly'?

Typescript

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

function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    animal.fly();
  } else {
    animal.swim();
  }
}

A Because 'fly' is not a property of Fish, the 'in' operator narrows animal to Bird, so animal.fly() is valid.

B The compiler complains because 'fly' is not guaranteed to exist on animal even after the 'in' check.

C The 'in' operator does not narrow union types when the property is not common to all types.

D The compiler error occurs because 'swim' is missing in the else block.

💡 Hint

Check how TypeScript narrows types with the 'in' operator and property existence.

The 'in' operator narrows animal to Fish in the if block, so animal.fly() is invalid. The compiler complains because after narrowing to Fish, 'fly' does not exist.

📝 Syntax

advanced

Which option correctly uses 'in' operator for narrowing?

Which of the following TypeScript code snippets correctly narrows the type using the 'in' operator?

A if ('swim' in animal) { animal.swim(); } else { animal.fly(); }

B if (animal in 'swim') { animal.swim(); } else { animal.fly(); }

C if ('swim' of animal) { animal.swim(); } else { animal.fly(); }

D if ('swim' on animal) { animal.swim(); } else { animal.fly(); }

💡 Hint

Remember the correct syntax for the 'in' operator in TypeScript and JavaScript.

The correct syntax is 'propertyName' in object. Only option A uses this syntax correctly.

🚀 Application

expert

Determine the number of keys in the narrowed object

Given the following TypeScript code, how many keys does the object 'obj' have inside the if block?

Typescript

type A = { a: number };
type B = { b: string };

function check(obj: A | B) {
  if ('a' in obj) {
    return Object.keys(obj).length;
  }
  return 0;
}

const result = check({ a: 1, extra: true } as A & { extra: boolean });

A 0

B 1

C 3

D 2

💡 Hint

Consider how Object.keys counts enumerable own properties regardless of type narrowing.

The object passed has keys 'a' and 'extra', so Object.keys returns 2 keys inside the if block.