Understanding TypeScript Union and Intersection Types

TypeScript provides powerful ways to define types, including union and intersection types. These features allow developers to create more flexible and robust applications. Below, we will break down both concepts with clear examples.

Union Types

Union types allow you to define a variable that can hold multiple types. It is denoted using the pipe (|) symbol. This is particularly useful when a function can accept different types of inputs.

Example 1: Basic Union Type

function printId(id: number | string) {
    console.log(`Your ID is: ${id}`);
}

printId(101);    // Output: Your ID is: 101
printId('202');  // Output: Your ID is: 202

In the above example, the printId function accepts either a number or a string as its argument, demonstrating how union types allow for flexibility in function parameters.

Example 2: Union Types with Objects

type Circle = { radius: number };
type Square = { sideLength: number };
type Shape = Circle | Square;

function getArea(shape: Shape): number {
    if ('radius' in shape) {
        return Math.PI * shape.radius * shape.radius;  // Area of Circle
    } else {
        return shape.sideLength * shape.sideLength; // Area of Square
    }
}

const circle: Circle = { radius: 5 };
const square: Square = { sideLength: 4 };

console.log(getArea(circle)); // Output: 78.53981633974483
console.log(getArea(square));  // Output: 16

In this example, the Shape type can be either a Circle or a Square. The getArea function checks which type it is and calculates the area accordingly.

Intersection Types

Intersection types allow you to combine multiple types into one. This is particularly useful when you want a single object to conform to multiple interfaces. Intersection types are denoted using the ampersand (&) symbol.

Example 1: Basic Intersection Type

interface Employee {
    id: number;
    name: string;
}

interface Manager {
    department: string;
}

type ManagerEmployee = Employee & Manager;

const manager: ManagerEmployee = {
    id: 1,
    name: 'Alice',
    department: 'Sales'
};

console.log(manager);
// Output: { id: 1, name: 'Alice', department: 'Sales' }

In this example, the ManagerEmployee type combines both Employee and Manager interfaces, allowing for a more detailed type structure.

Example 2: Using Intersection Types in Function Parameters

function logPersonDetails(person: Employee & Manager) {
    console.log(`ID: \({person.id}, Name: }\(person.name}, Department: ${person.department}`);
}

const person = { id: 2, name: 'Bob', department: 'Marketing' };
logPersonDetails(person);
// Output: ID: 2, Name: Bob, Department: Marketing

In this final example, the logPersonDetails function requires an object that satisfies both Employee and Manager interfaces. It ensures that all required properties are present.

Conclusion

Understanding union and intersection types in TypeScript is crucial for writing robust and type-safe code. By utilizing these features, developers can create more flexible and maintainable applications. Experiment with these examples in your own projects to see how they can improve your TypeScript experience!

A Comprehensive Guide to TypeScript Union and Intersection Types