Article · YouTube · 2 minute read · published 2 March 2021

TypeScript – Type Predicates (Transcript)

Screenshot of a TypeScript project illustrating custom predicates

Published on 2 Mar 2021 • 1 666 views (snapshot when curated).

Transcript

— Servus friends, Andi here. Today we are going to demystify TypeScript’s type predicates and build a couple of custom guards together.

— Quick refresher: a type predicate is the foo is Bar syntax you return from a function to tell the compiler “trust me, the argument is of type Bar when this is true.”

— I start with a Person | null union. Inside an if (person) block the compiler still thinks person might be null. That’s where predicates shine.

— Let’s create a helper function isPerson(value: unknown): value is Person. Inside the function we check the shape: typeof value === "object", the value exists, and the name property is a string.

— Returning that boolean means everywhere we call isPerson(suspect) TypeScript now narrows the type to Person on the true branch.

— I demonstrate in VS Code: before the guard we have Person | null, after if (isPerson(person)) the hover shows a clean Person type.

— Predicates also work with arrays. I write function isPersonArray(value: unknown): value is Person[] and reuse Array.isArray plus every(isPerson).

— That means you can validate JSON payloads from APIs and get fully typed results without casting.

— Another pattern is discriminated unions. I have type Result = Success | Failure. A predicate isSuccess(result): result is Success checks the status field.

— Inside the success branch I can access result.data. Inside the failure branch I handle result.error. No as casting required.

— Important reminder: predicates only convince the compiler; they do not protect you at runtime unless the checks are correct. Always validate everything that comes from the outside world.

— In frameworks like React you can pair predicates with hooks. For example, const user = useUser() may return User | undefined. Guard once and you get strict typing everywhere downstream.

— Bonus tip: combine predicates with asserts to throw early. A helper like assertIsPerson(value) can throw an error while simultaneously narrowing the type for the remaining code path.

— That’s it! You now know how to roll your own type guards and make TypeScript work for you instead of the other way round.

— Danke fürs Zuschauen! Drop a comment if you want me to cover more advanced narrowing tricks or conditional types in a future video.