Type Guards — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— Type Guards
📋typeof
⚙️instanceof
🔄Custom Guard
✅Discriminated
🎯 Next: Test →
Step 1 / 4
Speed
typeof
typeof narrows primitive types in if branches💡 Analogy
Like sorting mail by type — in the "letters" pile, you know each item is a letter.
typeof value === "string" tells TypeScript that inside the if block, value is string, not number. TypeScript calls this narrowing.
Console Output
> padStart("hello", 8) → "   hello"  (string branch)
> padStart(42, 5)    → "   42"   (number branch)
●type-guards.ts
typeofL2–7
1// typeof guard — primitive type narrowing
2function padStart(value: string | number, padLen: number): string {
3  if (typeof value === 'string') {
4    return value.padStart(padLen);    // value: string here
5  }
6  return String(value).padStart(padLen); // value: number here
7}
8 
9// instanceof guard — class instance narrowing
10class Dog { bark() { return 'Woof!'; } }
11class Cat { meow() { return 'Meow!'; } }
12 
13function makeSound(animal: Dog | Cat) {
14  if (animal instanceof Dog) {
15    return animal.bark();  // animal: Dog
16  }
17  return animal.meow();    // animal: Cat (narrowed by elimination)
18}
19 
20// Custom type guard — 'arg is T' return type
21interface Fish { swim(): void; }
22interface Bird { fly(): void; }
23 
24function isFish(pet: Fish | Bird): pet is Fish {
25  return (pet as Fish).swim !== undefined;
26}
27 
28function move(pet: Fish | Bird) {
29  if (isFish(pet)) {
30    pet.swim();  // pet: Fish
31  } else {
32    pet.fly();   // pet: Bird
33  }
34}
35 
36// Discriminated union — exhaustive narrowing
37type Shape =
38  | { kind: 'circle'; radius: number }
39  | { kind: 'square'; side: number }
40  | { kind: 'rectangle'; width: number; height: number };
41 
42function area(shape: Shape): number {
43  switch (shape.kind) {
44    case 'circle':    return Math.PI * shape.radius ** 2;
45    case 'square':    return shape.side ** 2;
46    case 'rectangle': return shape.width * shape.height;
47  }
48}
48 lines
Timeline — 4 Steps
typeof
typeof narrows primitive types in if branches💡 Analogy
Like sorting mail by type — in the "letters" pile, you know each item is a letter.
typeof value === "string" tells TypeScript that inside the if block, value is string, not number. TypeScript calls this narrowing.
Console Output
> padStart("hello", 8) → "   hello"  (string branch)
> padStart(42, 5)    → "   42"   (number branch)

Was this page helpful?

Discussion

typeof narrows primitive types in if branches

💡 Analogy

Like sorting mail by type — in the "letters" pile, you know each item is a letter.

typeof value === "string" tells TypeScript that inside the if block, value is string, not number. TypeScript calls this narrowing.

Console Output

> padStart("hello", 8) → "   hello"  (string branch)
> padStart(42, 5)    → "   42"   (number branch)

typeof narrows primitive types in if branches

💡 Analogy

Like sorting mail by type — in the "letters" pile, you know each item is a letter.

typeof value === "string" tells TypeScript that inside the if block, value is string, not number. TypeScript calls this narrowing.

Console Output

> padStart("hello", 8) → "   hello"  (string branch)
> padStart(42, 5)    → "   42"   (number branch)