Typescript Union And Intersection Types Complete Guide

Understanding TypeScript Union Types

A union type in TypeScript is a type that represents one of several possible data types. It allows you to declare a variable, parameter or return type that can be more than one type.

Syntax

type VarName = Type1 | Type2 | Type3 … | TypeN;

Step 1: Define Basic Union Types

Example: Define a variable that can be either string or number.

// Define a union type for a variable
let id: string | number = 101;

id = "abc"; // Valid
// id = true; // Invalid -> This will raise an error since boolean is not part of the union

Explanation:

• The id variable is allowed to store either a string or a number.
• Assigning a string or number value to id works.
• Assigning a boolean or any other non-matching type raises a compile-time error.

Step 2: Using Union with Functions

Example: Create a function that accepts either a number or a string.

function printID(id: number | string) {
    console.log("Your ID is: " + id);
}

printID(101);   // Output: Your ID is: 101
printID("abc"); // Output: Your ID is: abc

Explanation:

• The printID function parameter id can accept either a number or a string.
• Inside the function, both types are treated as the intersection of properties that belong to both types (in this case, only methods/properties common to both number and string types).

Step 3: Narrowing in Union Types

To make better use of union types, it’s usually necessary to "narrow" them down from their combined set of types to a more specific one within our code. This can be done using typeof, instanceof, or custom type guards.

Example: Improve the printID function by narrowing the type based on typeof.

function printID(id: number | string) {
    if (typeof id === "string") {
        // Treat id as string if typeof id === "string"
        console.log("Your string ID is: " + id.toUpperCase());
    } else {
        // Treat id as number in all other cases
        console.log("Your numeric ID is: " + id.toFixed(2));
    }
}

printID(101);   // Output: Your numeric ID is: 101.00
printID("abc"); // Output: Your string ID is: ABC

Explanation:

• The typeof operator is used to check the type of id.
• Within the if block, TypeScript understands that id is a string and allows you to use string-specific methods like toUpperCase.
• In the else block, TypeScript infers id must be a number, enabling the use of number-specific methods like toFixed.

Understanding TypeScript Intersection Types

An intersection type in TypeScript constructs a type by combining multiple types. It creates an object that has all of the features of the types from which it is intersected.

Syntax

type IntersectedType = Type1 & Type2 & Type3 … & TypeN;

Step 1: Creating Intersected Types

Example: Combine two interface types to form an intersection type.

interface Employee {
    employeeID: number;
    department: string;
}

interface Manager {
    managerID: number;
    managedEmployees: Array<Employee>;
}

// Intersection of Employee and Manager
type ManagerEmployee = Employee & Manager;

const managerEmp: ManagerEmployee = {
    employeeID: 1,
    department: "Technology",
    managerID: 2,
    managedEmployees: [
        { employeeID: 2, department: "Design" },
        { employeeID: 3, department: "Marketing" }
    ]
};

console.log(managerEmp);
// Output: { employeeID: 1, department: 'Technology', managerID: 2, managedEmployees: [ { employeeID: 2, department: 'Design' }, { employeeID: 3, department: 'Marketing' } ] }

Explanation:

• The ManagerEmployee type is an intersection of Employee and Manager.
• A managerEmp object must satisfy all property requirements from both interfaces (employeeID, department, managerID, and managedEmployees).

Step 2: Intersection with Multiple Types

Example: Combine multiple types to form an intersection.

type DetailedInfo = {
    age: number;
    address: string;
} & Employee & Manager;

const detailedPerson: DetailedInfo = {
    employeeID: 4,
    department: "HR",
    managerID: 5,
    managedEmployees: [],
    age: 30,
    address: "123 Elm St"
};

console.log(detailedPerson);
// Output: { employeeID: 4, department: 'HR', managerID: 5, managedEmployees: [], age: 30, address: '123 Elm St' }

Explanation:

• The DetailedInfo type is an intersection of an anonymous type (age and address), Employee, and Manager.
• The detailedPerson object must have all properties from each of these types.

Step 3: Combining Primitive Types

Although unions are more common with primitive types, intersections with basic types aren’t typically applicable, they can represent common functionality for objects. However, intersections can be used with utility types or in scenarios where a combination makes logical sense.

Example: Combine two primitive types (unconventional, but shown for completion).

// Unconventional - This doesn't make much sense but shows syntax
type Mixed = number & string;

// No valid assignment possible here as no value satisfies both conditions.
// const mixedVal: Mixed = 42; // Incorrect
// const mixedVal: Mixed = "fourtytwo"; // Incorrect

// Normally, intersections are used for objects or complex logic

Step 4: Using Intersections for Enhancing Functionality

Example: Enhance an existing type with additional properties.

interface BaseUser {
    userID: number;
    userName: string;
}

interface AuthenticatedUser extends BaseUser & { token: string } {}

const user: AuthenticatedUser = {
    userID: 6,
    userName: "johndoe",
    token: "abcd-efgh-ijkl-mnop"
}

console.log(user);
// Output: { userID: 6, userName: 'johndoe', token: 'abcd-efgh-ijkl-mnop' }

Explanation:

• The AuthenticatedUser type extends BaseUser and includes an additional token property via an intersection.
• The user object of type AuthenticatedUser includes all the required properties.

Complete Example with Code

Here is a comprehensive example showcasing both union and intersection types:

// Union Types
interface Dog {
    barks: boolean;
    numberOfLegs: number;
}

interface Cat {
    meows: boolean;
    numberOfLegs: number;
}

type Animal = Dog | Cat;

function isDog(animal: Animal): animal is Dog {
    return "barks" in animal;
}

// Intersection Types
interface Human {
    name: string;
    speaksInEnglish: boolean;
}

interface Engineer {
    skills: Array<string>;
    experienceYears?: number;
}

type EnglishEngineer = Human & Engineer;

const engineer1: EnglishEngineer = {
    name: "Jane Doe",
    speaksInEnglish: true,
    skills: ["TypeScript", "Data Structures"]
};

const engineer2: EnglishEngineer = {
    name: "John Smith",
    speaksInEnglish: false,
    skills: ["Machine Learning", "Deep Learning"],
    experienceYears: 5
};

console.log(engineer1); 
// Output: { name: 'Jane Doe', speaksInEnglish: true, skills: ['TypeScript', 'Data Structures'] }

console.log(engineer2);
// Output: { name: 'John Smith', speaksInEnglish: false, skills: ['Machine Learning', 'Deep Learning'], experienceYears: 5 }

// Function accepting union type
function animalDetails(animal: Animal) {
    console.log(`This animal has ${animal.numberOfLegs} legs`);
    if (isDog(animal)) {
        console.log(`It ${animal.barks ? "barks" : "does not bark"}`);
    } else {
        console.log(`It ${animal.meows ? "meows" : "does not meow"}`);
    }
}

const myDog: Dog = { barks: true, numberOfLegs: 4 };
const myCat: Cat = { meows: true, numberOfLegs: 4 };

animalDetails(myDog);  // Output: This animal has 4 legs \n It barks
animalDetails(myCat);  // Output: This animal has 4 legs \n It meows

Explanation:

1. Union Types:

   • Defined Animal as a union of Dog and Cat. An Animal can be either a Dog or a Cat.
   • Created a type guard isDog to determine whether an Animal is a Dog, enabling narrowing.

2. Intersection Types:

   • Defined EnglishEngineer as an intersection combining Human and Engineer. Represents someone who is both a human and an engineer.
   • Created examples of engineers who fulfill both the human and engineer criteria with or without optional properties.