Union and Intersection Types in TypeScript

In TypeScript, union and intersection types are powerful features that allow developers to create complex types by combining multiple types together. These features enable enhanced type safety and flexibility when working with different data structures. Let's dive into the details of union and intersection types in TypeScript.

Union Types

Union types allow us to specify that a variable or parameter can either have one type or another type. This is done by using the pipe (|) operator to separate the types. For example, consider the following union type declaration:

let myVariable: string | number;

Here, myVariable can hold either a string or a number. This enables us to assign values of both types to myVariable:

myVariable = "Hello";
myVariable = 42;

Union types prove to be handy when we need to work with different data types and want to allow versatility in a variable or parameter.

Intersection Types

Intersection types, on the other hand, allow us to create a type by combining multiple types into one. This is done by using the ampersand (&) operator to merge the types. For instance, consider the following intersection type declaration:

interface Person {
  name: string;
  age: number;
}

interface Employee {
  employeeId: string;
  title: string;
}

type EmployeePerson = Person & Employee;

In this example, the EmployeePerson type is created by combining the Person and Employee interfaces. Now, EmployeePerson contains all the properties from both interfaces:

const emp: EmployeePerson = {
  name: "John Doe",
  age: 30,
  employeeId: "123456",
  title: "Software Engineer"
};

By using an intersection type, we can easily create complex types that include properties from multiple sources. This proves especially useful when working with libraries or APIs that provide multiple sets of data.

Working with Union and Intersection Types

Once we have defined a union or intersection type, we can use it just like any other type in TypeScript. We can specify union or intersection types for variables, function parameters, and even return types.

For example, let's consider a function that accepts a union type parameter:

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

Here, the printValue function can accept either a string or a number as its value parameter. This allows flexibility when calling the function with different types of values.

Similarly, we can use intersection types to define more complex data structures. For instance, we can combine multiple interfaces into one and use it as a type for a variable:

interface Shape {
  color: string;
}

interface Square {
  sideLength: number;
}

interface ColoredSquare extends Shape, Square {
  borderColor: string;
}

const square: ColoredSquare = {
  color: "red",
  sideLength: 10,
  borderColor: "blue"
};

In this example, the ColoredSquare type is created by combining the Shape and Square interfaces. The resulting type contains all the properties from both interfaces and an additional borderColor property.

Conclusion

Union and intersection types in TypeScript provide powerful tools for creating more flexible and robust types. With the ability to combine multiple types together, developers can express complex data structures and enhance type safety in their codebase. By leveraging these features, you can write more resilient TypeScript code that handles various types of data with ease.