Typescript Working With Multiple Types Complete Guide

Union Types

Union types allow a variable or a function parameter to hold multiple different types.

Example 1: Basic Union Type

Step 1: Define a function that accepts either a string or a number.

// Define a function that can accept either a string or a number
function printId(id: string | number) {
    console.log("Your ID is: " + id);
}

// Call the function with different types
printId("ABC"); // Output: Your ID is: ABC
printId(123);   // Output: Your ID is: 123

Step 2: Narrow the types inside the function.

Sometimes, it's necessary to know which type is being handled. You can do this using type guards.

function printIdWithNarrowing(id: string | number) {
    if (typeof id === "string") {
        console.log("Your ID is a string: " + id.toUpperCase());
    } else {
        console.log("Your ID is a number: " + id.toFixed(2));
    }
}

// Call the function with different types
printIdWithNarrowing("abc"); // Output: Your ID is a string: ABC
printIdWithNarrowing(456);   // Output: Your ID is a number: 456.00

Example 2: Union Type in Arrays

Step 1: Create a mixed-type array.

// Define an array that can hold either strings or numbers
const data: (string | number)[] = ["apple", 2, "banana", 4];

// Loop through the array and print each elements
data.forEach(item => {
    console.log(item);
});
// Output:
// apple
// 2
// banana
// 4

Intersection Types

Intersection types combine multiple types into one, creating a new type that has all the properties of each of the types involved.

Example 1: Basic Intersection Type

Step 1: Define two separate interfaces.

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

interface Manager {
    managerId: number;
    department: string;
}

Step 2: Combine those interfaces into one intersection type.

// Define an intersection type that merges both Employee and Manager properties
type ManagerEmployee = Employee & Manager;

const ceo: ManagerEmployee = {
    employeeId: 1,
    name: "Alice Smith",
    managerId: 1,
    department: "General Management"
};

console.log(ceo.name + " works in the " + ceo.department); 
// Output: Alice Smith works in the General Management

Example 2: Intersection Types in Classes

Step 1: Define two separate classes.

Using intersection types doesn’t directly work on classes, however, you can use the concept in inheritance.

class Vehicle {
    drive() {
        console.log("Driving...");
    }
}

class Boat {
    sail() {
        console.log("Sailing...");
    }
}

class Amphicar extends Vehicle implements Boat {
    sail() {
        console.log("Amphicar sailing...");
    }

    swim() {
        console.log("Amphicar swimming...");
    }
}

const myVehicle: Amphicar = new Amphicar();
myVehicle.drive(); // Output: Driving...
myVehicle.sail();  // Output: Amphicar sailing...
myVehicle.swim();  // Output: Amphicar swimming...

Step 2: Mix behaviors at runtime:

Instead, intersection types can be used when dealing with objects and functions at runtime.

const vehicleInstance: Vehicle = new Vehicle();
const boatInstance: Boat = {
    sail: () => {
        console.log("Boat sailing...");
    }
}

const combinedVehicle = Object.assign({}, vehicleInstance, boatInstance);

function operate(vehicle: Vehicle & Boat) {
    vehicle.drive();
    vehicle.sail();
}

operate(combinedVehicle);
// Output:
// Driving...
// Boat sailing...

Type Guards

Type guards are a pattern of working with union types that leverages type predicates to narrow the type of variables during runtime.

Example 1: Type Guard Function

Step 1: Define an interface and a function that checks if an object adheres to that interface.

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

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

// Type guard function
function isFish(pet: Fish | Bird): pet is Fish {
    return (pet as Fish).swim !== undefined;
}

Step 2: Use this type guard to safely work with the union types.

const fish: Fish = {
    swim: () => {
        console.log("Fish swimming...");
    }
}

const bird: Bird = {
    fly: () => {
        console.log("Bird flying...");
    }
}

function interactWithPet(pet: Fish | Bird) {
    if (isFish(pet)) {
        // Inside here, TypeScript knows that 'pet' is of type 'Fish'
        pet.swim();
    } else {
        // Inside here, TypeScript knows that 'pet' is of type 'Bird'
        pet.fly();
    }
}

interactWithPet(fish); // Output: Fish swimming...
interactWithPet(bird); // Output: Bird flying...

Example 2: in Keyword as Type Guard

You can also use the in keyword as a type guard to check if a particular property exists in an object.

function move(pet: Fish | Bird) {
    if ("swim" in pet) {
        // Inside here, TypeScript knows that 'pet' must be of type 'Fish'
        pet.swim();
    } else {
        // Inside here, TypeScript knows that 'pet' must be of type 'Bird'
        pet.fly();
    }
}

move(fish); // Output: Fish swimming...
move(bird); // Output: Bird flying...

Example 3: Discriminated Unions

A powerful pattern in TypeScript is to have a common field among union types that helps identify which variant of the type is currently being used.

Step 1: Define the discriminated union.

interface Circle {
    kind: "circle";
    radius: number;
}

interface Square {
    kind: "square";
    sideLength: number;
}

type Shape = Circle | Square;

Step 2: Use the switch statement to narrow down the type.