Andrew's Digital Garden

Narrowing in Typescirpt

By default, Typescript is very capable of narrowing types based on control flow. This is done through standard looking Javascript code, rather than having to explicitly hint at the types. The control flow analysis is quite complex and capable of splitting and re-merging repeatedly, as types can often change at different points.

It can do this through various means, such as: typeof guards:

if (typeof padding === "number") { return padding + 1; // padding: number }

Truthiness narrowing:

if (padding) { return padding + 1; // padding: truthy (no longer null or undefined) }

Equality narrowing:

function example(x: string | number, y: string | boolean) { if (x === y) { // We can now call any 'string' method on 'x' or 'y'. } }

in operator narrowing:

type Fish = { swim: () => void }; type Bird = { fly: () => void }; function move(animal: Fish | Bird) { if ("swim" in animal) { return animal.swim(); } return animal.fly(); }

For more explicit type checking/hinting, there's also [[20210705104556-type-predicates-typescript]]

[[20210705123131-discriminated-unions-typescript]] [[20210726121640-narrowing-const-typescript]] [[20220801115328-typescript-const-assertion]]

[[ts]]

Narrowing in Typescirpt