The in operator narrowing in Typescript - Mini Project: Build & Apply

Using the in Operator for Type Narrowing in TypeScript

📖 Scenario: You are building a simple program that handles different types of vehicles. Each vehicle type has unique properties. You want to safely check which type of vehicle you have and access its specific properties.

🎯 Goal: Learn how to use the in operator in TypeScript to narrow down types and safely access properties that only exist on certain types.

📋 What You'll Learn

Create a union type with two vehicle types

Create a variable with one of the vehicle types

Use the in operator to check the type

Print the specific property based on the type

💡 Why This Matters

🌍 Real World

In real apps, you often work with data that can be one of many types. Using the <code>in</code> operator helps you safely check which type you have and avoid errors.

💼 Career

Understanding type narrowing with the <code>in</code> operator is important for writing safe and clear TypeScript code, a skill valued in frontend and backend development jobs.

1

Create the vehicle types and a variable

Create two types called Car and Bike. Car should have a property doors of type number. Bike should have a property hasPedals of type boolean. Then create a variable called vehicle of type Car | Bike and assign it the value { doors: 4 }.

Typescript

// Create types Car and Bike
// Create variable vehicle of type Car | Bike and assign { doors: 4 }

Hint

Use type keyword to create types. Use | to combine types for the variable.

2

Add a check using the in operator

Add an if statement that checks if the property doors is in vehicle using the in operator.

Typescript

type Car = { doors: number };
type Bike = { hasPedals: boolean };

let vehicle: Car | Bike = { doors: 4 };

// Use if statement with 'in' operator to check for 'doors' in vehicle

Hint

Use if ('doors' in vehicle) to check if the vehicle has the doors property.

3

Access the property inside the if block

Inside the if block, create a variable called doorCount and set it to vehicle.doors.

Typescript

type Car = { doors: number };
type Bike = { hasPedals: boolean };

let vehicle: Car | Bike = { doors: 4 };

if ('doors' in vehicle) {
    // Create doorCount and assign vehicle.doors
}

Hint

Inside the if block, use let doorCount = vehicle.doors; to access the property.

4

Print the door count

Add a console.log statement inside the if block to print doorCount.

Typescript

type Car = { doors: number };
type Bike = { hasPedals: boolean };

let vehicle: Car | Bike = { doors: 4 };

if ('doors' in vehicle) {
    let doorCount = vehicle.doors;
    // Print doorCount
}

Hint

Use console.log(doorCount); to print the number of doors.

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