TypeScript Type Guards: 3 Practical Examples

Understanding TypeScript Type Guards

TypeScript type guards are a powerful feature that allows developers to narrow down the type of a variable within a conditional block. This is particularly useful when working with union types or when you need to ensure that a variable meets certain criteria before performing operations on it. This article presents three diverse examples of TypeScript type guards that demonstrate their practical applications.

Example 1: Discriminated Unions

Context

Discriminated unions are a common pattern in TypeScript, allowing you to define different object types that share a common property. Type guards can be used to differentiate between these types safely.

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

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

type Shape = Circle | Square;

function getArea(shape: Shape): number {
  if (shape.kind === 'circle') {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.sideLength ** 2;
  }
}

Notes

By using the kind property, TypeScript can determine the specific type of Shape, allowing the getArea function to compute the area accurately based on the shape type. This implementation promotes type safety and clarity in your code.

Example 2: Instanceof Type Guard

Context

When working with classes, you can use the instanceof operator to determine the type of an object at runtime. This is particularly useful when you have multiple classes that may share some properties or methods.

class Dog {
  bark() {
    return 'Woof!';
  }
}

class Cat {
  meow() {
    return 'Meow!';
  }
}

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    return animal.bark();
  } else {
    return animal.meow();
  }
}

Notes

In this example, the makeSound function checks whether the animal parameter is an instance of Dog or Cat. This allows for specific method calls based on the actual type of the object, enhancing code readability and functionality.

Example 3: Custom Type Guard Function

Context

You can create your own type guard functions to encapsulate type-checking logic, making your code cleaner and more maintainable. This is useful when dealing with more complex types or conditions.

interface Admin {
  role: 'admin';
  permissions: string[];
}

interface User {
  role: 'user';
  name: string;
}

type Person = Admin | User;

function isAdmin(person: Person): person is Admin {
  return person.role === 'admin';
}

function getPermissions(person: Person) {
  if (isAdmin(person)) {
    return person.permissions;
  } else {
    return [];
  }
}

Notes

The isAdmin function acts as a custom type guard, checking if the person is of type Admin. This approach simplifies the logic within the getPermissions function, allowing for a clear distinction between user roles while enhancing code maintainability.

These examples demonstrate how TypeScript type guards can improve the reliability and clarity of your code. Implementing these patterns can lead to a more robust application design.