Union Types, Intersection Types, and Type Guards in TypeScript

Introduction:

TypeScript offers powerful type-system features that go beyond traditional JavaScript. Union types, intersection types, and type guards are essential concepts that enhance the expressiveness and safety of your code. In this detailed blog, we will delve deeper into these TypeScript features, understanding their intricacies, exploring advanced use cases, and providing in-depth examples.

If you want to learn about the typescript, you can refer here.

Union Types:

Union types allow you to declare a variable that can hold values of multiple types. It is denoted by the | operator. Consider the following example:

function display(value: string | number): void {
  console.log(value);
}

display("Hello"); // Output: Hello
display(42);      // Output: 42

In this example, the display the function takes an argument value of type string | number, which means it can accept either a string or a number. The function can handle both types, providing flexibility and broader applicability.

Intersection Types:

Intersection types allow you to combine multiple types into a single type that contains the properties and methods of all constituent types. It is denoted by the & operator. Let’s consider an example:

interface Printable {
  print(): void;
}

interface Loggable {
  log(): void;
}

type PrintableLoggable = Printable & Loggable;

function printAndLog(item: PrintableLoggable): void {
  item.print();
  item.log();
}

class MyClass implements Printable, Loggable {
  print() {
    console.log("Printing...");
  }

  log() {
    console.log("Logging...");
  }
}

const obj: PrintableLoggable = new MyClass();
printAndLog(obj);

In this example, we define two interfaces, Printable and Loggable, each with a method. We then create an intersection type PrintableLoggable by combining the two interfaces. The printAndLog function takes an argument of type PrintableLoggable and can invoke both print and log methods. Finally, we create an instance of MyClass, which implements both interfaces and passes it to the printAndLog function.

Type Guards:

Type guards allow you to narrow down the variable type within a conditional block based on runtime checks. They are especially useful when working with union types. Let’s consider an example:

interface Dog {
  woof(): void;
}

interface Cat {
  meow(): void;
}

function makeSound(animal: Dog | Cat): void {
  if ("woof" in animal) {
    animal.woof();
  } else {
    animal.meow();
  }
}

const dog: Dog = {
  woof() {
    console.log("Woof!");
  }
};

const cat: Cat = {
  meow() {
    console.log("Meow!");
  }
};

makeSound(dog); // Output: Woof!
makeSound(cat); // Output: Meow!

In this example, the makeSound the function accepts an argument animal of type Dog | Cat. Inside the function, a type guard in the operator is used to check if a woof exists in animals. If it does, the animal is considered a Dog, and the woof the method is invoked. Otherwise, it is considered a Cat, and the meow method is called. The type guard enables safe access to specific properties or methods based on the available types.

Conclusion:

Union types, intersection types, and type guards are potent features that TypeScript provides to enhance code expressiveness, flexibility, and safety. Union types allow variables to hold values of multiple types, intersection types combine various types into a single type, and type guards help narrow down the type of a variable based on runtime checks. By utilizing these features, you can write more robust and type-safe code. In this comprehensive guide, we explored the concepts of union types, intersection types, and type guards, and provided detailed examples to demonstrate their usage. Apply these techniques to improve your TypeScript code and leverage the full potential of the language. Happy coding!

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.