TS Basics

TS Advance

TS Type Guards

❮ Previous Next ❯

TypeScript Type Guards

Type Guards allow you to narrow down the specific type of an object within a conditional block.

They are essential when working with union types and API payloads of an unknown shape.

TypeScript uses standard JavaScript operators to perform these intelligent checks.

This bridges the gap between dynamic JavaScript runtime and static TypeScript compilation.

1. Using typeof and instanceof

The typeof operator is used to narrow down primitive values like strings and numbers.

The instanceof operator is used to check if an object was instantiated by a specific Class.

TypeScript recognizes these operators and automatically infers the correct type inside the if block.

This allows you to safely access properties that only exist on that specific type.

Basic Guards Example:

function formatData(data: string | Date) {
  if (typeof data === "string") {
    // TypeScript knows data is a string here
    return data.trim().toUpperCase();
  }
  if (data instanceof Date) {
    // TypeScript knows data is a Date object here
    return data.toISOString();
  }
}


console.log(formatData("   hello typescript   "));

2. The 'in' Operator

The in operator checks if a specific property key exists directly on an object.

It is perfect for narrowing down object union types that don't share a discriminator property.

If the property exists, TypeScript safely assumes the object belongs to the matching interface.

This prevents crashes caused by accessing undefined object methods.

The 'in' Operator Example:

interface Bird { fly(): void; }
interface Fish { swim(): void; }


function moveAnimal(animal: Bird | Fish) {
  if ("fly" in animal) {
    animal.fly(); // Safely called
  } else {
    animal.swim(); // Must be a Fish
  }
}

3. User-Defined Type Guards

Sometimes standard JavaScript checks are not powerful enough for highly complex data.

You can create custom functions that return a type predicate (e.g., arg is Type).

If the function returns true, the compiler fully trusts the type narrowing logic.

Custom guards are extensively used when validating massive JSON structures for SEO-friendly data fetching.

Custom Guard Example:

interface Car { engine: string; }


// The return type 'vehicle is Car' is the magic predicate
function isCar(vehicle: any): vehicle is Car {
  return (vehicle as Car).engine !== undefined;
}


let myRide: unknown = { engine: "V8" };
if (isCar(myRide)) {
  console.log(myRide.engine); // Safe!
}

Exercise

?

Which operator is best suited for narrowing down an object by checking if a specific property exists?

4. Final Thoughts

Type Guards empower you to safely navigate complex data without resorting to dangerous casting.

They merge JavaScript's flexibility with TypeScript's unyielding strictness seamlessly.

Next, we will explore the powerful logic behind Conditional Types!

❮ Previous Next ❯