Type Guards and Narrowing

Typeof Guard

typeof checks narrow primitive unions before code uses type-specific operations.

typeof guard `typeof value === "number"` tells TypeScript that the guarded branch has a number.

Typeof Guard

useNumber
typeof.ts
Replay: real traced execution (multi-file project)
function describeValue(value: string | number): string {
    if (typeof value === "number") {
        return `number=${value * 2}`;
    }
    return `text=${value.toUpperCase()}`;
}

const useNumber: boolean = true;
const input: string | number = useNumber ? 7 : "ts";
const result: string = describeValue(input);

console.log(result);

function describeValue(value: string | number): string {
    if (typeof value === "number") {
        return `number=${value * 2}`;
    }
    return `text=${value.toUpperCase()}`;
}

const useNumber: boolean = false;
const input: string | number = useNumber ? 7 : "ts";
const result: string = describeValue(input);

console.log(result);

  1. useNumber ← true, input ← 7

    5    return `text=${value.toUpperCase()}`;6}78const useNumber→ true: boolean = true;  //@useNumber=false9const input→ 7: string | number = useNumbertrue ? 7 : "ts";10const result: string = describeValue(input7);

  2. function describeValue(value: string | number): string

    1function describeValue(value7: string | number): string {2    if (typeof value === "number") {

  3. result ← number=14

    8const useNumber: boolean = true;  //@useNumber=false9const input: string | number = useNumber ? 7 : "ts";10const result→ number=14: string = describeValue(input7);1112console.log(resultnumber=14);
    outputnumber=14

  1. useNumber ← false, input ← ts

    5    return `text=${value.toUpperCase()}`;6}78const useNumber→ false: boolean = false;9const input→ ts: string | number = useNumberfalse ? 7 : "ts";10const result: string = describeValue(inputts);

  2. function describeValue(value: string | number): string

    1function describeValue(valuets: string | number): string {2    if (typeof value === "number") {3        return `number=${value * 2}`;4    }5    return `text=${valuets.toUpperCase()}`;6}

  3. result ← text=TS

    8const useNumber: boolean = false;9const input: string | number = useNumber ? 7 : "ts";10const result→ text=TS: string = describeValue(inputts);1112console.log(resulttext=TS);
    outputtext=TS