10. Union and Intersection Types

TypeScript, a superset of JavaScript, brings static typing to the dynamic nature of JavaScript. Among its powerful features are Union and Intersection Types, which provide developers with the flexibility to express complex type relationships and constraints. These types are crucial for creating robust, maintainable, and error-free code, especially in large codebases where type safety becomes paramount.

To understand Union and Intersection Types, we first need to grasp the concept of types in TypeScript. Types define the shape of data. They describe what kind of values a variable can hold, thus enabling developers to catch errors at compile time rather than runtime. Union and Intersection Types extend this concept by allowing variables to be more flexible in the kinds of values they can represent.

Union Types

Union Types allow a variable to hold one of several types. They are defined using the pipe | symbol. This is particularly useful when a variable can have multiple, but distinct, types. For example, a function might accept either a string or a number as an argument.

let value: string | number;
value = "Hello";  // valid
value = 42;       // valid
value = true;     // Error: Type 'boolean' is not assignable to type 'string | number'.

In this example, value can be either a string or a number, but not a boolean. Union Types are beneficial when working with APIs or libraries that return multiple types of data, such as JSON responses that can vary based on the context.

Another common use case for Union Types is in function parameters where a function can handle different types of inputs:

function format(input: string | number): string {
    if (typeof input === "string") {
        return input.toUpperCase();
    } else {
        return input.toFixed(2);
    }
}

Here, the format function takes either a string or a number and performs type-specific operations. TypeScript's type narrowing feature helps in determining the type of input at runtime, allowing the function to handle each type appropriately.

Intersection Types

Intersection Types, on the other hand, allow a variable to be of multiple types simultaneously. They are defined using the ampersand & symbol. This type is particularly useful when you want to combine multiple types into one, allowing a variable to have all the properties of the intersected types.

type Person = {
    name: string;
    age: number;
};

type Employee = {
    employeeId: number;
    department: string;
};

type EmployeeDetails = Person & Employee;

const employee: EmployeeDetails = {
    name: "John Doe",
    age: 30,
    employeeId: 12345,
    department: "Engineering"
};

In this example, EmployeeDetails is an intersection of Person and Employee, meaning it must have all the properties from both types. Intersection Types are beneficial in scenarios where you want to build complex objects that share properties from multiple sources, such as combining user data with role information in an authentication system.

Combining Union and Intersection Types

Union and Intersection Types can be combined to create even more complex type structures. This allows for highly flexible and expressive type definitions, enabling developers to model real-world data more accurately.

type Fish = {
    swim: () => void;
};

type Bird = {
    fly: () => void;
};

type Animal = Fish | Bird;

type FlyingFish = Fish & Bird;

function move(animal: Animal) {
    if ("swim" in animal) {
        animal.swim();
    } else {
        animal.fly();
    }
}

const flyingFish: FlyingFish = {
    swim: () => console.log("Swimming"),
    fly: () => console.log("Flying")
};

move(flyingFish);

In this example, Animal is a union type, allowing an instance to be either a Fish or a Bird. The FlyingFish is an intersection type, combining both Fish and Bird, thus possessing both swimming and flying capabilities. The move function demonstrates how TypeScript can intelligently handle these types, using type guards to determine the correct method to call.

Practical Applications

Union and Intersection Types are not just theoretical constructs; they have practical applications in real-world programming. Consider a scenario where you are building a form handling library. Forms can have various input types such as text, number, date, etc., each with its own set of properties and methods.

type TextInput = {
    type: "text";
    value: string;
    placeholder: string;
};

type NumberInput = {
    type: "number";
    value: number;
    min: number;
    max: number;
};

type DateInput = {
    type: "date";
    value: Date;
    minDate: Date;
    maxDate: Date;
};

type FormInput = TextInput | NumberInput | DateInput;

function handleInput(input: FormInput) {
    switch (input.type) {
        case "text":
            console.log("Text input:", input.value);
            break;
        case "number":
            console.log("Number input:", input.value);
            break;
        case "date":
            console.log("Date input:", input.value.toDateString());
            break;
    }
}

Here, FormInput is a union of different input types. The handleInput function can process each type of input appropriately, ensuring that the correct properties and methods are accessed based on the input type.

Conclusion

Union and Intersection Types in TypeScript provide powerful tools for developers to express complex type relationships. Union Types allow for flexibility in the types a variable can hold, while Intersection Types enable the combination of multiple types into a single cohesive type. Together, they enhance TypeScript's ability to model real-world data structures accurately and safely, reducing runtime errors and improving code maintainability. By mastering these types, developers can write more expressive and robust TypeScript code, paving the way for efficient and scalable applications.

Next page of the Free Ebook:

11Literal Types

8 minutes