Type Guards in TypeScript

Type guards are techniques in TypeScript that help refine the type of a variable within a specific scope. They allow TypeScript to infer more specific types for variables, improving type safety and reducing errors in your code. Type guards are typically used with conditional statements (if, switch) to narrow the type of a variable based on certain conditions.

 

Key Concepts of Type Guards

• Type Guard: A TypeScript feature that narrows the type of a variable within a block, allowing access to type-specific properties and methods.
• Custom Type Guards: You can define your own type guards using functions to check types dynamically.
• Built-in Type Guards: TypeScript provides built-in operators like typeof, instanceof, and in for performing type checks.

 

Example Usage of Type Guards

Example 1: Using typeof for Primitive Types

TypeScript provides the typeof operator to narrow types of primitive types like number, string, boolean, etc.

function printLength(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String length: ${value.length}`);
  } else {
    console.log(`Number value: ${value}`);
  }
}

printLength("Hello");  // Output: String length: 5
printLength(123);      // Output: Number value: 123

In this example:

• The typeof operator is used to check if value is a string or number.
• Based on the result, the appropriate code is executed, refining the type within the respective block.

Example 2: Using instanceof for Class Types

You can use instanceof to narrow the type of an object based on its class or constructor function.

class Dog {
  bark() {
    console.log("Woof!");
  }
}

class Cat {
  meow() {
    console.log("Meow!");
  }
}

function makeSound(animal: Dog | Cat): void {
  if (animal instanceof Dog) {
    animal.bark();  // Dog specific method
  } else {
    animal.meow();  // Cat specific method
  }
}

makeSound(new Dog());  // Output: Woof!
makeSound(new Cat());  // Output: Meow!

Here:

• instanceof is used to check whether animal is an instance of the Dog or Cat class, narrowing down the type and ensuring correct method calls.

Example 3: Using in Operator for Object Types

The in operator checks whether a property exists in an object, which can be used to narrow down types in union types.

interface Car {
  drive(): void;
}

interface Boat {
  sail(): void;
}

function move(vehicle: Car | Boat): void {
  if ("drive" in vehicle) {
    vehicle.drive();  // Car specific method
  } else {
    vehicle.sail();   // Boat specific method
  }
}

move({ drive: () => console.log("Driving") });  // Output: Driving
move({ sail: () => console.log("Sailing") });   // Output: Sailing

Here:

• The in operator is used to check if the drive property exists in the vehicle, allowing the narrowing of type based on the object's structure.

 

Custom Type Guards

TypeScript allows you to create custom type guards, which are functions that return a type predicate (x is Type) to narrow the type of a variable.

function isDog(animal: Dog | Cat): animal is Dog {
  return (animal as Dog).bark !== undefined;
}

function makeSound(animal: Dog | Cat): void {
  if (isDog(animal)) {
    animal.bark();  // Dog specific method
  } else {
    animal.meow();  // Cat specific method
  }
}

Here:

• The isDog function is a custom type guard that checks if the animal has the bark method (indicating it is a Dog).
• The animal is Dog syntax is the type predicate, which refines the type of animal within the if block.

 

Type Guards with Union Types

Union types often require type guards to narrow down the type so that specific properties can be accessed.

function getLength(value: string | number | null): number {
  if (typeof value === "string") {
    return value.length;  // Accessing string-specific property
  } else if (typeof value === "number") {
    return value.toString().length;  // Accessing number-specific property
  } else {
    return 0;  // Handling null case
  }
}

console.log(getLength("Hello"));  // Output: 5
console.log(getLength(12345));    // Output: 5
console.log(getLength(null));     // Output: 0

Here:

• The typeof type guards ensure that the appropriate method (length for strings or toString() for numbers) is called.

 

Summary

• Type Guards: TypeScript allows narrowing the types of variables using built-in operators (typeof, instanceof, in) or custom functions.
• Built-in Type Guards: Use typeof for primitives, instanceof for class instances, and in for checking properties in objects.
• Custom Type Guards: You can create your own type guards with functions returning a type predicate (x is Type).
• Union Types: Type guards help to narrow the type in union types, providing type-safe access to properties.

Type guards provide powerful type safety by refining the types within specific blocks, enabling more precise and error-free code in TypeScript.