Type narrowing in TypeScript is a crucial feature that allows developers to refine the type of a variable within a specific code block. It contributes to better type safety by providing more accurate type information based on runtime checks.

1. Basic Type Narrowing with typeof:

Type narrowing using typeof allows refining a variable's type based on its runtime type, enhancing type safety by enabling specific operations depending on the type.

function getValue(val: number | string) {
    if (typeof val === 'string') {
        return val.toLowerCase();
    } else {
        return val;
    }
}

console.log(getValue(2));         // Output: 2
console.log(getValue('ABCDEFGH')); // Output: abcdefgh

2. Type Narrowing with "in" Operator:

Utilizing the "in" operator for type narrowing enables developers to conditionally check for the existence of a property in an object, facilitating precise handling of varying types within a code block.

interface Circle {
    radius: number;
}

interface Square {
    sideLength: number;
}

function printShapeInfo(shape: Circle | Square): void {
    if ("radius" in shape) {
        console.log(`Circle with radius ${shape.radius}`);
    } else {
        console.log(`Square with side length ${shape.sideLength}`);
    }
}

const myCircle: Circle = { radius: 5 };
const mySquare: Square = { sideLength: 4 };

printShapeInfo(myCircle); // Outputs: Circle with radius 5
printShapeInfo(mySquare); // Outputs: Square with side length 4

3. Type Narrowing with instanceof and Type Predicates:

Leveraging instanceof and custom type predicates empowers developers to discern between specific class instances, enhancing type safety and enabling targeted operations based on the actual runtime type.

class Car {
    brand: string;

    constructor(brand: string) {
        this.brand = brand;
    }
}

class Bicycle {
    type: string;

    constructor(type: string) {
        this.type = type;
    }
}

function printVehicleInfo(vehicle: Car | Bicycle): void {
    if (vehicle instanceof Car) {
        console.log(`Car with brand: ${vehicle.brand}`);
    } else {
        console.log(`Bicycle with type: ${vehicle.type}`);
    }
}

function isCar(obj: any): obj is Car {
    return obj instanceof Car;
}

const myCar = new Car("Toyota");
const myBicycle = new Bicycle("Mountain");

printVehicleInfo(myCar);     // Outputs: Car with brand: Toyota
printVehicleInfo(myBicycle); // Outputs: Bicycle with type: Mountain

4. Discriminated Unions for Exhaustiveness Checking:

Discriminated unions coupled with exhaustive checking provide a powerful mechanism for handling complex type structures, ensuring that all possible types within the union are considered, thus preventing unintentional omissions and enhancing overall code robustness.

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

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

interface Rectangle {
    kind: "rectangle";
    length: number;
    breadth: number;
}

type Shape = Circle | Square | Rectangle;

function getTrueShapeArea(shape: Shape): number {
    switch (shape.kind) {
        case 'circle':
            return Math.PI * shape.radius ** 2;
        case 'square':
            return shape.side ** 2;
        default:
            // Exhaustiveness check with 'never'
            const exhaustiveCheck: never = shape;
            return exhaustiveCheck;
    }
}

These techniques empower developers to write more robust and type-safe code, especially when dealing with complex structures and varying types. By leveraging type narrowing, developers can catch potential errors during development, leading to more reliable and maintainable TypeScript code.

Grateful for the invaluable TypeScript knowledge gained, thanks to freeCodeCamp and Hitesh Choudhary