Typescript Intersection And Union Types Complete Guide

Intersection Types

Intersection types allow you to combine multiple types into one. The resulting type has all the features of the combined types.

Example 1: Combining Interfaces

// Define two interfaces
interface Employee {
    name: string;
    age: number;
}

interface Engineer {
    skills: string[];
    department: string;
}

// Create an intersection type that combines both Employee and Engineer interfaces
type EmployeeEngineer = Employee & Engineer;

// Create a function that prints details of an EmployeeEngineer
const printEmployeeEngineerDetails = (person: EmployeeEngineer) => {
    console.log(`Name: ${person.name}`);
    console.log(`Age: ${person.age}`);
    console.log(`Skills: ${person.skills.join(', ')}`);
    console.log(`Department: ${person.department}`);
};

// Create an object that satisfies the EmployeeEngineer type
const johnDoe: EmployeeEngineer = {
    name: "John Doe",
    age: 30,
    skills: ["Software Development", "Machine Learning"],
    department: "Engineering"
};

// Call the function with the object
printEmployeeEngineerDetails(johnDoe);

Explanation:

• We define two interfaces Employee and Engineer.
• The EmployeeEngineer type is an intersection of Employee and Engineer, meaning it must include properties from both.
• In the johnDoe object, we need to provide all the required properties from both interfaces.
• The function printEmployeeEngineerDetails accepts a parameter of type EmployeeEngineer and prints its details.

Example 2: Combining Classes

// Define two classes
class Animal {
    eat() {
        console.log("Eating...");
    }
}

class Mammal {
    breathe() {
        console.log("Breathing...");
    }
}

// Create an intersection type that combines both Animal and Mammal classes
type AnimalMammal = Animal & Mammal;

// Create a function that uses an instance of AnimalMammal
function performActions(animalMammal: AnimalMammal): void {
    animalMammal.eat();      // Methods from Animal class
    animalMammal.breathe();  // Methods from Mammal class
}

// Manually create an instance with combined behavior
let dogInstance: AnimalMammal = {
    eat: function() { 
        console.log("Dog eating..."); 
    },
    breathe: function() { 
        console.log("Dog breathing..."); 
    }
};

// Call the function with the combined instance
performActions(dogInstance);

Explanation:

• We define two classes Animal and Mammal.
• The AnimalMammal type combines the properties and methods of both Animal and Mammal.
• We create an object dogInstance that includes all method implementations.
• The performActions method can now use instances that implement both eat and breathe methods.

Union Types

Union types allow you to declare a variable that can hold any one of several types.

Example 1: Basic Union Type

// Define a union type that can be a number or a string
type NumberOrString = number | string;

// Create a function that accepts either a number or a string
function processInput(input: NumberOrString) {
    if (typeof input === 'number') {
        console.log(`Number processed: ${input}`);
    } else if (typeof input === 'string') {
        console.log(`String processed: ${input}`);
    }
}

// Use the function with different types
processInput(42);         // Pass a number
processInput("Hello!");   // Pass a string

Explanation:

• The NumberOrString type is a union of number and string.
• The processInput function checks the type of input before processing it accordingly.
• This demonstrates how a function can handle different types within a single parameter.

Example 2: Union Type with Interfaces

// Define two interfaces
interface Bird {
    fly(): void;
}

interface Fish {
    swim(): void;
}

// Create a union type that can be either a Bird or a Fish
type BirdFish = Bird | Fish;

// Create functions that process each type separately
function makeBirdFly(bird: Bird) {
    bird.fly();
}

function makeFishSwim(fish: Fish) {
    fish.swim();
}

// Function to determine the type and call the appropriate method
function operateOnAnimal(animal: BirdFish): void {
    if ('fly' in animal) {
        makeBirdFly(animal);
    } else if ('swim' in animal) {
        makeFishSwim(animal);
    } else {
        throw new Error("Unknown animal type.");
    }
}

// Implement objects that satisfy either Bird or Fish
let birdInstance: Bird = {
    fly: function() { 
        console.log("Bird flying..."); 
    }
};

let fishInstance: Fish = {
    swim: function() { 
        console.log("Fish swimming..."); 
    }
};

// Call the function with different instances
operateOnAnimal(birdInstance);  // Output: "Bird flying..."
operateOnAnimal(fishInstance);  // Output: "Fish swimming..."

Explanation:

• We define two interfaces Bird and Fish.
• The BirdFish type declares a union between Bird and Fish.
• We write separate functions to process the fly and swim actions.
• The operateOnAnimal function uses the in keyword to check which method exists on the provided object and calls the appropriate function.
• We implement two objects birdInstance and fishInstance satisfying their respective interfaces.

Example 3: Narrowing Down Union Types

// Define a union type that can hold different data types
type Data = string | number[] | boolean;

// Function to handle different cases of Data
function processData(data: Data): void {
    if (typeof data === 'string') {
        console.log(`Processing string: ${data}`);
    } else if (Array.isArray(data)) {
        console.log(`Processing array of ${data.map(item => item).join(', ')}`);
    } else if (typeof data === 'boolean') {
        console.log(`Processing boolean: ${data}`);
    }
}

// Test the processData function with various inputs
processData("Hello");
processData([1, 2, 3]);
processData(true);

Explanation:

• The Data type is a union consisting of string, number[], and boolean.
• The processData function identifies the exact type within the union using typeof and Array.isArray.
• The console.log statements are conditional to the actual type provided during a function invocation, demonstrating proper type narrowing.

Summary:

• Intersection Types: Combine multiple types into one, creating a type that includes all members of the combined types.
• Union Types: Represent a value that could be one of several types.