TypeScript Type Guards

TypeScript Type Guards: Custom Predicates & Type Narrowing

Type guards allow you to inspect values at runtime and inform the TypeScript compiler of a narrower type within a conditional block.

Type Guard Mechanisms

1. typeof: Checks primitives (string, number, boolean, symbol, bigint, function).
2. instanceof: Checks class instances.
3. in operator: Checks for property existence on objects.
4. Custom Type Predicates: User-defined functions returning arg is TargetType.

Practical Code Example

// Custom Type Predicate Function (arg is TargetType)
interface Dog {
  kind: "dog";
  bark: () => void;
}

interface Cat {
  kind: "cat";
  meow: () => void;
}

type Pet = Dog | Cat;

// Custom Type Guard
function isDog(pet: Pet): pet is Dog {
  return (pet as Dog).bark !== undefined;
}

function handlePetSound(pet: Pet): void {
  if (isDog(pet)) {
    // TypeScript narrows pet to Dog inside this block!
    pet.bark();
  } else {
    // TypeScript narrows pet to Cat inside this block!
    pet.meow();
  }
}

const myDog: Dog = { kind: "dog", bark: () => console.log("Woof!") };
handlePetSound(myDog);

Best Practices & Gotchas

• Always Return arg is Type for Custom Guards: Standard boolean return types do not trigger compiler type narrowing.
• Combine in and typeof: Use built-in JavaScript operators inside guards before resorting to custom assertion functions.
• Ensure Guard Logic Matches Contract: If a type guard function contains faulty runtime logic, the compiler will trust the predicate and lead to runtime errors.

Self-Check Challenge

Write a custom type guard isString(val: unknown): val is string using typeof val === "string".