Explain type narrowing.

Type narrowing in TypeScript is the process by which TypeScript refines the type of a variable within a specific code block, based on various checks and language constructs. It helps provide more precise type information, enabling safer and more robust code by allowing you to work with a more specific type than the original declared type (often a union type).

What is Type Narrowing?

At its core, type narrowing is TypeScript's ability to analyze control flow and reduce the set of possible types a variable can hold. When a variable has a union type (e.g., string | number), TypeScript uses conditional statements and other checks to determine a more specific type for that variable within a particular scope. This allows you to safely access properties or call methods specific to the narrowed type without needing explicit type assertions, thus preventing potential runtime errors.

Common Type Narrowing Constructs

TypeScript offers several built-in mechanisms to perform type narrowing:

1. `typeof` Type Guards

The typeof operator is commonly used to narrow down primitive types like string, number, boolean, symbol, bigint, and undefined. TypeScript understands these checks and updates the variable's type accordingly.

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

2. `instanceof` Type Guards

The instanceof operator checks if an object is an instance of a particular class. This is useful for narrowing down types to a specific class or constructor function.

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

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    // 'animal' is narrowed to 'Dog'
    animal.bark();
  } else {
    // 'animal' is narrowed to 'Cat'
    animal.meow();
  }
}

3. Truthiness Narrowing

TypeScript can understand truthiness checks, particularly when dealing with null or undefined. If a variable is checked in an if condition and it's determined to be truthy, TypeScript will remove null and undefined from its possible types.

function greetUser(user: { name: string; email?: string | null }) {
  if (user.email) {
    // 'user.email' is narrowed to 'string' here (not string | null | undefined)
    console.log(`Email: ${user.email.toLowerCase()}`);
  } else {
    console.log('No email provided.');
  }
}

4. Equality Narrowing (`==`, `===`, `!=`, `!==`)

Equality checks can also narrow types. For example, comparing a variable to a specific literal value or null/undefined can inform TypeScript about its type.

type Color = 'red' | 'green' | 'blue';

function printColor(color: Color | null) {
  if (color === 'red') {
    // 'color' is narrowed to 'red'
    console.log('The color is red.');
  } else if (color !== null) {
    // 'color' is narrowed to 'green' | 'blue'
    console.log(`The color is ${color}.`);
  } else {
    // 'color' is narrowed to 'null'
    console.log('No color specified.');
  }
}

5. `in` Operator Narrowing

The in operator checks if an object has a certain property. This is particularly useful for distinguishing between objects in a union type based on their unique properties.

interface Square { side: number; kind: 'square'; }
interface Circle { radius: number; kind: 'circle'; }

type Shape = Square | Circle;

function getArea(shape: Shape) {
  if ('side' in shape) {
    // 'shape' is narrowed to 'Square'
    return shape.side * shape.side;
  } else {
    // 'shape' is narrowed to 'Circle'
    return Math.PI * shape.radius * shape.radius;
  }
}

6. User-Defined Type Guards

For more complex scenarios, you can define your own type guard functions. These functions return a type predicate (e.g., parameterName is Type), which TypeScript uses to narrow the type of the argument within the scope where the function returns true.

interface Car { drive(): void; }
interface Boat { sail(): void; }

function isCar(vehicle: Car | Boat): vehicle is Car {
  return (vehicle as Car).drive !== undefined;
}

function operateVehicle(vehicle: Car | Boat) {
  if (isCar(vehicle)) {
    // 'vehicle' is narrowed to 'Car'
    vehicle.drive();
  } else {
    // 'vehicle' is narrowed to 'Boat'
    vehicle.sail();
  }
}

Benefits of Type Narrowing

• Improved Type Safety: Prevents you from trying to access properties or call methods that might not exist on a variable's current type, thus reducing runtime errors.
• Better Developer Experience: Provides accurate autocompletion and type-checking in IDEs, making code easier to write and maintain.
• Clearer Code Logic: Explicitly showing how types are refined helps in understanding the control flow and assumptions made about data.
• Reduced Need for Type Assertions: Minimizes the use of as Type assertions, which can sometimes mask potential issues if used incorrectly.

In summary, type narrowing is a powerful feature in TypeScript that enhances code reliability and developer productivity by intelligently refining types based on runtime checks and control flow analysis.