Typescript Union & Intersection Types

In TypeScript, Union and Intersection types are powerful tools for creating flexible and precise type definitions.

In TypeScript, Union and Intersection types are powerful tools for creating flexible and precise type definitions. They allow you to define types that can accept multiple types of values (union) or combine multiple types into a single type (intersection). Here’s a breakdown of how each works and examples to illustrate their use.

Union Types

A Union type allows a value to be one of several types. You create a union type by listing multiple types, separated by a pipe (|) symbol. This is useful when a variable can hold more than one type of value.

Example:

1type StringOrNumber = string | number;
2
3function displayValue(value: StringOrNumber) {
4    if (typeof value === "string") {
5        console.log("String value:", value.toUpperCase());
6    } else {
7        console.log("Number value:", value.toFixed(2));
8    }
9}
10
11displayValue("Hello"); // String value: HELLO
12displayValue(42);      // Number value: 42.00
13

In this example, StringOrNumber can be either a string or a number. The function displayValue checks the type of the value and handles it accordingly.

Intersection Types

An Intersection type combines multiple types into one. A variable of an intersection type must satisfy all combined types simultaneously. You create an intersection type by listing multiple types, separated by an ampersand (&) symbol. This is useful when you want an object to have multiple properties from different types.

1type Person = {
2    name: string;
3    age: number;
4};
5
6type Employee = {
7    employeeId: number;
8    department: string;
9};
10
11type EmployeeProfile = Person & Employee;
12
13const profile: EmployeeProfile = {
14    name: "Amir",
15    age: 30,
16    employeeId: 1234,
17    department: "Development"
18};
19
20console.log(profile);
21

In this example, EmployeeProfile combines the Person and Employee types. An object of type EmployeeProfile must have all properties from both Person and Employee.

Advanced Example: Union and Intersection Together

You can also combine Union and Intersection types to create complex types.

Example:

1type SuccessResponse = {
2    status: "success";
3    data: any;
4};
5
6type ErrorResponse = {
7    status: "error";
8    error: string;
9};
10
11type ApiResponse = SuccessResponse | ErrorResponse;
12
13function handleResponse(response: ApiResponse) {
14    if (response.status === "success") {
15        console.log("Data:", response.data);
16    } else {
17        console.log("Error:", response.error);
18    }
19}
20
21handleResponse({ status: "success", data: { id: 1, name: "Test" } }); // Data: { id: 1, name: "Test" }
22handleResponse({ status: "error", error: "Not found" });              // Error: Not found
23

In this example, ApiResponse is a union of SuccessResponse and ErrorResponse, allowing it to be either type depending on the response status.

Summary

Union (|): Accepts multiple types of values, allowing flexibility in variable values.
Intersection (&): Combines multiple types into one, requiring all properties from each type.

Typescript Basic Configurations: Understand tsconfig.json basics.

Typescript Interfaces and Type Aliases