The in operator narrowing in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check if the property 'name' exists in the object.

Typescript

if ('name' [1] obj) {
  console.log(obj.name);
}

Drag options to blanks, or click blank then click option'

Ain

Binstanceof

ChasOwnProperty

Dtypeof

Attempts:

3 left

💡 Hint

Common Mistakes

Using typeof instead of in.

Using hasOwnProperty as a keyword instead of a method.

Using instanceof which checks object type, not properties.

The in operator checks if a property exists in an object.

2fill in blank

medium

Complete the code to narrow the type using the in operator.

Typescript

function printId(obj: { id: number } | { name: string }) {
  if ('id' [1] obj) {
    console.log(obj.id);
  } else {
    console.log(obj.name);
  }
}

Drag options to blanks, or click blank then click option'

Ainstanceof

Bin

ChasOwnProperty

Dtypeof

Attempts:

3 left

💡 Hint

Common Mistakes

Using typeof which checks type, not property.

Using instanceof which is for class instances.

The in operator narrows the type by checking if the property exists.

3fill in blank

hard

Fix the error in the type narrowing using the in operator.

Typescript

function getValue(obj: { a: number } | { b: string }) {
  if ('b' [1] obj) {
    return obj.b;
  }
  return obj.a;
}

Drag options to blanks, or click blank then click option'

Ain

BhasOwnProperty

Ctypeof

Dinstanceof

Attempts:

3 left

💡 Hint

Common Mistakes

Missing the 'in' keyword between property and object.

Using typeof or instanceof incorrectly.

The in operator requires the syntax: 'property' in object.

4fill in blank

hard

Fill the blank to correctly narrow types and access properties.

Typescript

function describe(obj: { x: number } | { y: string }) {
  if ('x' [1] obj) {
    return obj.x.toFixed(2);
  } else {
    return obj.y.toUpperCase();
  }
}

Drag options to blanks, or click blank then click option'

AhasOwnProperty

Btypeof

Cin

Dinstanceof

Attempts:

3 left

💡 Hint

Common Mistakes

Using typeof or instanceof instead of in.

Swapping the order of property and object.

The in operator is used as: 'property' in object to narrow types.

5fill in blank

hard

Fill both blanks to create a type guard using the in operator.

Typescript

function isCat(animal: { meow: () => void } | { bark: () => void }): animal is { meow: () => void } {
  return 'meow' [1] animal && typeof [2] === 'function';
}

Drag options to blanks, or click blank then click option'

Ain

Canimal.meow

Danimal.bark

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bark' instead of 'meow' in the check.

Not checking the type of the property.

Using typeof on the object instead of the property.

This function checks if 'meow' is a property of animal and if it is a function, to narrow the type.

Practice

1.

What does the in operator do in TypeScript?

easy

A. Adds a new property to an object

B. Checks if a property exists in an object and narrows the type

C. Deletes a property from an object

D. Checks if a value is equal to a property

Solution

1. Step 1: Understand the in operator purpose

   The in operator checks if a given property exists in an object.

2. Step 2: Recognize its use in TypeScript narrowing

   TypeScript uses this check to narrow the type safely based on the presence of the property.

3. Final Answer:

   Checks if a property exists in an object and narrows the type -> Option B

4. Quick Check:

   in operator = property check and type narrowing [OK]

Hint: Remember: in checks property presence to narrow types [OK]

Common Mistakes:

• Thinking in adds or deletes properties
• Confusing in with equality checks
• Assuming in works only for arrays

2.

Which of the following is the correct syntax to check if property name exists in object obj using the in operator?

?

easy

A. "name" in obj

B. obj in "name"

C. obj.hasOwnProperty("name")

D. obj.name in

Solution

1. Step 1: Recall the in operator syntax

   The correct syntax is: "propertyName" in object.

2. Step 2: Match the syntax with options

   "name" in obj matches the correct syntax exactly: "name" in obj.

3. Final Answer:

   "name" in obj -> Option A

4. Quick Check:

   Syntax is "property" in object [OK]

Hint: Syntax is always "property" in object [OK]

Common Mistakes:

• Reversing the order of property and object
• Using method calls instead of in
• Leaving in without operands

3.

What will be the output of the following TypeScript code?

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

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

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

medium

A. Type error at compile time

B. "Bird can fly"

C. "Fish can swim"

D. Runtime error

Solution

1. Step 1: Analyze the input object

   The object passed has a swim method, so it matches the Fish type.

2. Step 2: Check the in operator condition

   The condition "swim" in animal is true, so the function returns "Fish can swim".

3. Final Answer:

   "Fish can swim" -> Option C

4. Quick Check:

   Property "swim" exists, so output is "Fish can swim" [OK]

Hint: Check which property exists to decide output [OK]

Common Mistakes:

• Confusing which property belongs to which type
• Assuming both properties exist simultaneously
• Expecting compile or runtime errors

4.

Identify the error in this TypeScript code using the in operator and fix it:

type Cat = { meow: () => void };
type Dog = { bark: () => void };

function speak(animal: Cat | Dog) {
  if (animal in "meow") {
    return "Cat speaks";
  } else {
    return "Dog speaks";
  }
}

medium

A. The in operator operands are reversed; should be "meow" in animal

B. Missing return type annotation

C. Function should use typeof instead of in

D. No error; code is correct

Solution

1. Step 1: Check in operator syntax

   The syntax requires the property name as the left operand and the object as the right operand.

2. Step 2: Identify the error in the code

   The code uses animal in "meow", which reverses operands. It should be "meow" in animal.

3. Final Answer:

   The in operator operands are reversed; should be "meow" in animal -> Option A

4. Quick Check:

   Property name must be left, object right in in [OK]

Hint: Remember: "property" in object, not object in "property" [OK]

Common Mistakes:

• Swapping operands of the in operator
• Using typeof instead of in for property checks
• Ignoring TypeScript narrowing benefits

5.

Given the following types and function, what will describeAnimal return when called with { fly: () => {}, name: "Eagle" }?

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

function describeAnimal(animal: Fish | Bird) {
  if ("swim" in animal) {
    return "Fish";
  } else if ("name" in animal) {
    return `Bird named ${animal.name}`;
  } else {
    return "Unknown";
  }
}

hard

A. "Fish"

B. Type error because of missing property

C. "Unknown"

D. "Bird named Eagle"

Solution

1. Step 1: Check the input object properties

   The object has fly and name properties, but no swim.

2. Step 2: Evaluate the in operator conditions

   First condition "swim" in animal is false. Second condition "name" in animal is true, so it returns Bird named Eagle.

3. Final Answer:

   "Bird named Eagle" -> Option D

4. Quick Check:

   Property "name" exists, so output is "Bird named Eagle" [OK]

Hint: Check properties in order to find matching type [OK]

Common Mistakes:

• Assuming presence of fly means Fish
• Ignoring the second in check for name
• Expecting errors due to missing swim