Learn the concept
Type Guards & Narrowing
Type guards are runtime checks that narrow types within conditional blocks. Built-in guards include typeof, instanceof, and in operators. Custom type guards are functions returning a type predicate (param is Type) to narrow types based on custom logic.
Built-in Type Guards:
typeof: For primitives (string, number, boolean, etc.)instanceof: For class instancesin: For checking property existence=== null, !== undefinedCustom Type Guards:
param is TypeWhy Use Type Guards:
// typeof guard for primitives
function process(value: string | number) {
if (typeof value === 'string') {
console.log(value.toUpperCase()); // value is string
} else {
console.log(value.toFixed(2)); // value is number
}
}
// instanceof guard for classes
class Dog { bark() { return 'woof'; } }
class Cat { meow() { return 'meow'; } }
function speak(animal: Dog | Cat) {
if (animal instanceof Dog) {
console.log(animal.bark()); // animal is Dog
} else {
console.log(animal.meow()); // animal is Cat
}
}
// 'in' operator guard
interface Fish { swim: () => void; }
interface Bird { fly: () => void; }
function move(animal: Fish | Bird) {
if ('swim' in animal) {
animal.swim(); // animal is Fish
} else {
animal.fly(); // animal is Bird
}
}Using type guards to validate and narrow untyped API responses before business logic
Type guards that narrow user types based on role, enabling type-safe access to role-specific properties
Using assertion functions to validate form submissions match expected shapes before processing
Build a runtime validator that returns type-guarded results using custom predicates
Implement a JSON parser that uses assertion functions to guarantee parsed data matches expected TypeScript types