Introduction to Advanced Type Narrowing

Advanced type narrowing allows you to refine complex types at runtime using advanced techniques like type guards, control flow analysis, and custom predicates.

These tools make your TypeScript code safer and more predictable.

What is Type Narrowing?

Type narrowing is the process of refining a broader type (e.g., string | number) into a more specific type using runtime checks.

Using typeof for Type Narrowing

The typeof operator can be used to narrow down primitive types:

function printValue(value: string | number): void {
  if (typeof value === 'string') {
    console.log(`String: ${value}`);
  } else {
    console.log(`Number: ${value}`);
  }
}

printValue('Hello'); // String: Hello
printValue(42); // Number: 42

Using instanceof for Type Narrowing

The instanceof operator can be used to narrow down class instances:

class Dog {
  bark() {
    console.log('Woof!');
  }
}

class Cat {
  meow() {
    console.log('Meow!');
  }
}

function makeSound(animal: Dog | Cat): void {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

makeSound(new Dog()); // Woof!
makeSound(new Cat()); // Meow!

Using Custom Type Guards

You can create custom type guard functions to narrow types more precisely:

type Fish = { swim: () => void };
type Bird = { fly: () => void };

declare const animal: Fish | Bird;

function isFish(animal: Fish | Bird): animal is Fish {
  return (animal as Fish).swim !== undefined;
}

if (isFish(animal)) {
  animal.swim();
} else {
  animal.fly();

Control Flow Analysis

TypeScript’s control flow analysis automatically narrows types based on the logical flow of your code:

function getLength(value: string | string[]): number {
  if (Array.isArray(value)) {
    return value.length;
  } else {
    return value.length;
  }
}

console.log(getLength('Hello')); // 5
console.log(getLength(['a', 'b', 'c'])); // 3

Benefits of Advanced Type Narrowing

Advanced type narrowing improves your code by:

• Reducing runtime errors.
• Making code safer and easier to understand.
• Providing precise control over type handling.

Practice Task

Create a function that takes a parameter of type string | number and logs a different message for each type. Use typeof to implement the logic.

Congratulations!

You’ve learned how to use advanced type narrowing techniques in TypeScript to refine and handle complex types safely and effectively. Practice these techniques to make your code more robust and type-safe!