How does narrowing work with unions?

Narrowing in TypeScript is a powerful feature that allows developers to refine the type of a variable based on certain conditions. When working with union types, narrowing becomes essential for ensuring that operations on these types are safe and predictable. Understanding how to effectively narrow types can help prevent runtime errors and improve code maintainability.

Union types are created by combining multiple types using the pipe (`|`) operator. For example, a variable can be declared as either a string or a number:

let value: string | number;

To narrow down the type of the variable, TypeScript provides several techniques, including type guards, the `instanceof` operator, and the `typeof` operator. Each of these methods can help determine the specific type of a union at runtime.

Type Guards

Type guards are functions or expressions that allow you to check the type of a variable. A common way to implement a type guard is by using the `typeof` operator:

function processValue(value: string | number) {
    if (typeof value === 'string') {
        console.log(value.toUpperCase()); // Safe to call string methods
    } else {
        console.log(value.toFixed(2)); // Safe to call number methods
    }
}

In this example, the `typeof` operator helps to determine whether `value` is a string or a number, allowing for safe method calls on the respective types.

Using `instanceof` for Object Types

When dealing with object types, the `instanceof` operator can be used to narrow down the type. For example:

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

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

type Animal = Dog | Cat;

function makeSound(animal: Animal) {
    if (animal instanceof Dog) {
        animal.bark(); // Safe to call Dog methods
    } else {
        animal.meow(); // Safe to call Cat methods
    }
}

Best Practices

• Always use type guards when working with union types to ensure type safety.
• Keep your type checks simple and readable to enhance code maintainability.
• Utilize custom type guards for complex types to encapsulate logic and improve reusability.

Common Mistakes

• Neglecting to handle all possible types in a union can lead to runtime errors. Always ensure that your type checks cover every case.
• Using type assertions (`as`) to bypass type checking can introduce bugs and defeat the purpose of TypeScript's type system.
• Overcomplicating type checks can make the code harder to read and maintain. Aim for clarity and simplicity.

In conclusion, mastering narrowing with unions in TypeScript is crucial for writing robust and type-safe applications. By employing type guards effectively and adhering to best practices, developers can significantly reduce the risk of errors and enhance the overall quality of their code.