¿Qué es el type narrowing y cómo lo hace el compilador?

Question

Accepted Answer

El **narrowing** es cómo TypeScript refina un tipo amplio (como un union) a uno más específico dentro de una rama de código, basándose en comprobaciones en tiempo de ejecución. El compilador rastrea el flujo de control y actualiza el tipo en consecuencia.

```ts
function process(x: string | number) {
  if (typeof x === "string") {
    x.toUpperCase(); // ✅ here x is narrowed to string
  } else {
    x.toFixed(2);    // ✅ here x must be number
  }
}
```

## Las herramientas de narrowing

```ts
typeof x === "string"          // typeof guard — for primitives
x instanceof Date              // instanceof — for classes
"role" in obj                  // in operator — property existence
Array.isArray(x)               // built-in guards
if (x) { ... }                  // truthiness narrows out null/undefined/0/""
if (x === null) { ... }         // equality narrowing
```

## Los discriminated unions hacen narrowing de forma limpia

```ts
type Shape =
  | { kind: "circle"; r: number }
  | { kind: "square"; side: number };

function area(s: Shape) {
  switch (s.kind) {            // the discriminant
    case "circle": return Math.PI * s.r ** 2;  // s is the circle variant
    case "square": return s.side ** 2;          // s is the square variant
  }
}
```

Comprobar el campo literal compartido (`kind`) le dice al compilador exactamente qué variante tienes, desbloqueando las propiedades de esa variante.

## Los guards personalizados extienden el narrowing

```ts
function isUser(x: unknown): x is User { return !!x && typeof (x as any).name === "string"; }
```

## Por qué es importante

El narrowing es lo que hace que los union types sean *usables*: te permite acceder de forma segura a miembros específicos de un tipo solo después de demostrar el tipo, convirtiendo comprobaciones en tiempo de ejecución en garantías en tiempo de compilación.

Es el mecanismo cotidiano detrás del manejo de `string | number`, `T | null` y estado etiquetado.