How does TypeScript narrow union types?

TypeScript provides a powerful type system that allows developers to define complex data structures and enforce type safety. One of the key features of TypeScript is its ability to narrow union types, which can significantly enhance code readability and reduce runtime errors. Understanding how TypeScript narrows union types is essential for writing robust applications.

Union types in TypeScript allow a variable to hold multiple types. For example, a variable can be defined to accept either a string or a number:

let value: string | number;

TypeScript uses several techniques to narrow these union types based on control flow analysis. The most common methods include type guards, the `instanceof` operator, and the `typeof` operator.

Type Guards

Type guards are custom functions that check the type of a variable. They help TypeScript infer the specific type of a union. Here’s an example:

function isString(value: string | number): value is string {
    return typeof value === 'string';
}

let myValue: string | number = "Hello";

if (isString(myValue)) {
    console.log(myValue.toUpperCase()); // TypeScript knows myValue is a string here
} else {
    console.log(myValue.toFixed(2)); // TypeScript knows myValue is a number here
}

Using `typeof`

The `typeof` operator is a built-in way to narrow union types. It checks the type of a variable at runtime:

let value: string | number = 42;

if (typeof value === 'string') {
    console.log(value.toUpperCase()); // This block will not execute
} else {
    console.log(value.toFixed(2)); // TypeScript knows value is a number here
}

Using `instanceof`

The `instanceof` operator is useful for narrowing types when dealing with class instances. 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(); // TypeScript knows animal is a Dog here
    } else {
        animal.meow(); // TypeScript knows animal is a Cat here
    }
}

Best Practices

• Always use type guards when dealing with union types to ensure type safety.
• Keep type guard functions simple and focused on a single responsibility.
• Utilize `typeof` and `instanceof` effectively to leverage TypeScript's control flow analysis.
• Document your type guard functions to improve code readability and maintainability.

Common Mistakes

• Neglecting to use type guards, leading to potential runtime errors.
• Using type assertions instead of type guards, which can bypass type safety.
• Overcomplicating type guard functions, making them hard to understand.

In conclusion, TypeScript's ability to narrow union types through various techniques allows developers to write safer and more predictable code. By employing type guards, `typeof`, and `instanceof`, developers can ensure that their applications handle different types correctly, minimizing the risk of errors and improving overall code quality.