Mastering Advanced Type Guards in TypeScript for Cleaner Code

TypeScript’s type system helps you catch errors early by providing powerful static typing. One of the core tools to leverage TypeScript effectively is using "type guards." Type guards let you check the type of a variable at runtime, enabling safer and cleaner code. In this tutorial, you’ll learn about advanced type guards beyond the basics, with practical examples you can use right away.

## What Are Type Guards?

Type guards are conditional checks that narrow down the type of a variable within a specific code block. For instance, the `typeof` operator is a simple type guard letting TypeScript know what type you’re dealing with in an `if` statement.

function example(value: string | number) {
  if (typeof value === 'string') {
    // Here TypeScript knows 'value' is a string
    console.log(value.toUpperCase());
  } else {
    // Here 'value' is a number
    console.log(value.toFixed(2));
  }
}

## Why Use Advanced Type Guards?

While basic type guards like `typeof` and `instanceof` are helpful, advanced type guards let you work with complex types, including custom objects or interfaces. They increase code clarity, reduce errors, and make your code easier to maintain.

## Creating Custom Type Guards

You can create a custom type guard by writing a function that returns a boolean and has a special return type called a "type predicate." This predicate tells TypeScript exactly what type the variable is if the function returns `true`.

interface Fish {
  swim: () => void;
}

interface Bird {
  fly: () => void;
}

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

function move(pet: Fish | Bird) {
  if (isFish(pet)) {
    pet.swim();  // TypeScript knows pet is Fish here
  } else {
    pet.fly();   // And here, pet is Bird
  }
}

In the example above, the `isFish` function works as a type guard checking whether a pet is a `Fish`. The `pet is Fish` return type is the key here: it communicates to TypeScript that inside the `if` block, `pet` can be treated specifically as a `Fish`.

## Using `in` Operator for Type Guards

Sometimes your types share many fields but differ in a few. The `in` operator checks whether a specific property exists in an object and acts as a type guard.

interface Admin {
  name: string;
  role: string;
}

interface User {
  name: string;
  startDate: Date;
}

function isAdmin(account: Admin | User): account is Admin {
  return 'role' in account;
}

function getInfo(account: Admin | User) {
  if (isAdmin(account)) {
    console.log(`Admin role: ${account.role}`);
  } else {
    console.log(`User started on: ${account.startDate.toDateString()}`);
  }
}

Here, checking `'role' in account` helps TypeScript narrow the type of `account` to `Admin` inside the conditional block.

## Combining Type Guards with Union Types

When dealing with union types, especially with overlapping fields, advanced type guards help to differentiate properly.

type Shape = Circle | Square | Rectangle;

interface Circle {
  kind: 'circle';
  radius: number;
}

interface Square {
  kind: 'square';
  sideLength: number;
}

interface Rectangle {
  kind: 'rectangle';
  width: number;
  height: number;
}

function isCircle(shape: Shape): shape is Circle {
  return shape.kind === 'circle';
}

function getArea(shape: Shape): number {
  if (isCircle(shape)) {
    return Math.PI * shape.radius ** 2;
  }
  if (shape.kind === 'square') {
    return shape.sideLength ** 2;
  }
  // shape must be Rectangle here
  return shape.width * shape.height;
}

Using discriminated unions with a `kind` field alongside custom type guards makes your code safe and easy to extend.

## Summary

Advanced type guards improve your TypeScript code by letting you precisely and safely narrow types at runtime. Use custom type guard functions, the `in` operator, discriminated unions, and type predicates to write clearer, more robust code that prevents bugs and improves maintainability. Experiment with these techniques to get more comfortable and unlock the full power of TypeScript’s type safety.