Why typeof type guards in Typescript? - Purpose & Use Cases

The Big Idea

Discover how a simple check can save you from confusing bugs and messy code!

The Scenario

Imagine you have a function that can receive different types of inputs, like numbers or strings, and you want to handle each type differently. Without a clear way to check the type, you might write many confusing if-else statements or risk errors when using the wrong type.

The Problem

Manually checking types by guessing or using complex code is slow and error-prone. You might forget to check a type or write repetitive code that's hard to read and maintain. This can cause bugs that are hard to find.

The Solution

Using typeof type guards in TypeScript lets you easily and safely check the type of a variable at runtime. This helps the program understand what kind of data it's working with, so it can run the right code without mistakes.

Before vs After

✗ Before

function process(value: any) {
  if (typeof value === 'string') {
    // handle string
  } else if (typeof value === 'number') {
    // handle number
  }
}

✓ After

function process(value: string | number) {
  if (typeof value === 'string') {
    // TypeScript knows value is string here
  } else {
    // TypeScript knows value is number here
  }
}

What It Enables

This lets you write safer and clearer code that adapts to different data types automatically, reducing bugs and improving developer confidence.

Real Life Example

For example, when building a calculator app, you might accept input as either a number or a string. Using typeof type guards helps you decide whether to parse the string or use the number directly.

Key Takeaways

Manually checking types is slow and risky.

typeof type guards let TypeScript understand variable types at runtime.

This leads to safer, cleaner, and easier-to-maintain code.