TypeScript uses type narrowing to narrow down the type of variable within a block of code. This is useful when you have something that could be of multiple types.

• Narrowing: a value cannot be one or more possible types
• Expanding: a value can be two or more possible types

let person = Math.random() > 0.5 ? undefined : "Matthew";
// person is `undefined | string`

// typeof narrowing
if (typeof person === "string") {
    person.toUpperCase();
}

// direct check narrowing
if (person == "Matthew") {
    person.toUpperCase();
}

// truth narrowing
person && person.toUpperCase();
person?.toUpperCase();

// property narrowing
if ("toUpperCase" in person) {
    person.toUpperCase();
}

Discriminated unions are a common pattern in TypeScript where you have a union of types that have a common property that identifies the type in the variable.

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

interface Rectangle {
    kind: "rectangle";
    width: number;
    height: number;
}

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

type Shape = Square | Rectangle | Circle;

function area(s: Shape) {
    switch (s.kind) {
        case "square":
            return s.size * s.size;
        case "rectangle":
            return s.width * s.height;
        case "circle":
            return Math.PI * s.radius ** 2;
    }
}

Sources

• Learning TypeScript by Josh Goldberg