Understanding TypeScript Union Types and Intersection Types

TypeScript is a powerful, statically typed superset of JavaScript that brings safety and scalability to your code. It allows you to express complex data structures with precision, and two of the fundamental concepts in TypeScript for creating such structures are union types and intersection types. These concepts are key to developing flexible and robust applications. In this article, we’ll dive into TypeScript’s union types and intersection types, exploring their features and use cases.

Union Types

A union type is a TypeScript feature that allows you to define a variable or parameter that can have multiple data types. This means a variable of a union type can store values of any of those types. To create a union type, you use the | symbol between the types you want to combine. Let’s look at a simple example:

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

displayValue("Hello, World!"); // Valid
displayValue(42); // Valid
displayValue(true); // Error: Argument of type 'true' is not assignable to parameter of type 'string | number'.

In the example above, the displayValue function accepts a parameter of type string | number. It can take either a string or a number as its argument, but it will throw an error if you try to pass any other data type.

Use Cases for Union Types:

1. Accepting Multiple Data Types: Union types are useful when you want a function, variable, or object property to accept more than one data type. For instance, when working with form inputs, you might want to allow users to input both strings and numbers.
2. Optional Parameters: You can use union types to create optional parameters. For example, a function could take a string or undefined, allowing you to call it with or without a parameter.

function greet(name?: string) {
  if (name) {
    console.log(`Hello, ${name}!`);
  } else {
    console.log("Hello!");
  }
}

greet("Alice"); // Hello, Alice!
greet(); // Hello!

Intersection Types

Intersection types allow you to combine multiple types into one. This means an object of an intersection type must satisfy all the types involved. To create an intersection type, you use the & symbol to combine the types. Here’s an example:

type Car = {
  brand: string;
  model: string;
};

type Engine = {
  type: string;
  horsepower: number;
};

type SportsCar = Car & Engine;

const mySportsCar: SportsCar = {
  brand: "Ferrari",
  model: "458",
  type: "V8",
  horsepower: 570
};

In this example, we have three types: Car, Engine, and SportsCar. SportsCar is defined as an intersection of Car and Engine, meaning it must have both the properties of a Car and an Engine. This concept is particularly useful when you want to combine different aspects of an object to create a more specific and detailed type.

Use Cases for Intersection Types:

1. Combining Types: Intersection types are perfect when you want to create composite types by merging existing types. This is common when you need to define complex objects that have properties from multiple sources.
2. Extending Types: You can use intersection types to extend or modify existing types. For instance, if you have a base type and want to add more properties, you can create an intersection type to do so.

type BaseUser = {
  name: string;
};

type Admin = {
  role: "admin";
};

type SuperAdmin = BaseUser & Admin;

const superAdminUser: SuperAdmin = {
  name: "John",
  role: "admin"
};

Conclusion

TypeScript’s union types and intersection types are essential tools for creating precise and flexible type definitions in your code. Union types allow you to accept multiple data types, making your code more versatile, while intersection types enable you to combine and extend types, enhancing the expressiveness of your code. By mastering these features, you can improve the safety, maintainability, and scalability of your TypeScript projects.