learning-front

Extra · Type-level TypeScript (opcional)

infer: extraer tipos

La palabra clave infer captura un tipo desconocido dentro de la cláusula extends de un conditional type y le da nombre: el mecanismo con el que están hechos ReturnType, Parameters y Awaited.

En el capítulo anterior viste cómo un conditional type elige entre dos tipos según una condición. Hay una extensión de esa idea que lo cambia todo: en vez de limitarte a elegir entre tipos que ya conoces, puedes capturar un tipo desconocido dentro de la condición y darle nombre. Esa es exactamente la función de infer.

infer: capturar un tipo desconocido#

La sintaxis aparece siempre dentro de la cláusula extends de un conditional type. En vez de escribir un tipo concreto, escribes infer seguido de un nombre, y TypeScript lo rellena con el tipo que encuentre en esa posición:

typescript
// ElementoDe<T> pregunta: "¿T es un array de algo?"
// Si lo es, infer U le pone nombre a ese "algo" y se devuelve en la rama true.
// Si no, el resultado es never.
type ElementoDe<T> = T extends Array<infer U> ? U : never;

Cuando evalúas ElementoDe<Heroe[]>, TypeScript hace lo siguiente:

  1. Compara Heroe[] con el patrón Array<infer U>.
  2. Encaja: Heroe[] es Array<Heroe>, así que U se captura como Heroe.
  3. La condición es verdadera, y se devuelve U, es decir, Heroe.

Si pasas ElementoDe<number>, number no encaja con Array<infer U> —no es un array— así que la condición falla y el resultado es never.

typescript
// TypeScript resuelve cada uno en compilación. Pasa el ratón por encima.
type A = ElementoDe<Heroe[]>;   // Heroe
type B = ElementoDe<string[]>;  // string
type C = ElementoDe<number>;    // never

infer solo es válido en la condición#

Una restricción importante: infer solo funciona dentro de la cláusula extends de un conditional type. No puedes usarlo en otro lugar. Si lo intentas fuera de esa posición, TypeScript lanza un error.

typescript
// Esto es VÁLIDO: infer U aparece dentro de la condición del extends.
type ElementoDe<T> = T extends Array<infer U> ? U : never;

// Esto NO compila: infer U no está dentro de un conditional type.
// type Mal<T> = infer U;

La razón es conceptual: infer captura un tipo que solo existe si la condición se cumple. Fuera de esa condición, no hay nada que capturar.

ReturnType por dentro: ya no es magia#

En el Nivel 5 usaste ReturnType<typeof miFuncion> como una caja negra. Ahora puedes ver qué hay dentro:

typescript
// La condición (...args: any[]) => infer R encaja con CUALQUIER función.
// args: any[] acepta cualquier número de parámetros, de cualquier tipo.
// Lo que infer R captura es lo que viene después de =>: el tipo de retorno.
type RetornoDe<T> = T extends (...args: any[]) => infer R ? R : never;

Cuando evalúas RetornoDe<() => Heroe>:

  1. TypeScript compara () => Heroe con el patrón (...args: any[]) => infer R.
  2. Encaja. R se captura como Heroe.
  3. Se devuelve R, es decir, Heroe.

Así está implementado ReturnType en la librería estándar de TypeScript, sin ninguna magia especial del compilador.

El mismo patrón aplicado a Promise#

Una vez que entiendes el patrón, aplicarlo a otras formas es mecánico. Una Promise<T> es una caja que contiene un tipo; infer la abre:

typescript
// PromesaDe<T> pregunta: "¿T es una Promise<algo>?"
// Si lo es, infer V captura ese algo y se devuelve.
// Si T no es una Promise, never.
type PromesaDe<T> = T extends Promise<infer V> ? V : never;

Esto es la base de cómo funciona el utility Awaited de la librería estándar (la versión completa además maneja Promises anidadas, algo que verás más adelante con tipos recursivos).

Puedes combinar RetornoDe y PromesaDe en cadena para extraer el tipo que devuelve una función asíncrona:

typescript
// cargarEquipo devuelve Promise<Heroe[]>.
declare function cargarEquipo(): Promise<Heroe[]>;

// Paso 1: extraer el tipo de retorno de la función → Promise<Heroe[]>.
type Retorno = RetornoDe<typeof cargarEquipo>;

// Paso 2: abrir la Promise → Heroe[].
type TipoDelEquipo = PromesaDe<Retorno>;

Lo que acabas de aprender#

infer es el mecanismo con el que la librería estándar de TypeScript implementa sus utilities más potentes. ReturnType, Parameters, Awaited, ConstructorParameters: todos usan infer para abrir una caja de tipo desconocido y sacar lo que hay dentro. Ahora que entiendes el patrón, esas utilidades dejan de ser magia y pasan a ser herramientas que puedes leer, reproducir y adaptar.

Comprueba lo que sabes#

Pregunta 1 de 4

¿En qué posición es válida la palabra clave `infer`?

Tu turno#

Implementa los tres extractores del Team Builder hasta que los tests Expect<Equal<...>> queden sin subrayado rojo. Empiezas con el extractor de array y acabas reconstruyendo los patrones internos de ReturnType y Awaited. Cuando lo tengas (o si te atascas), despliega las soluciones y fíjate en el salto de un nivel al siguiente.

Ejercicio · en esta página

Construye extractores de tipos con infer para el Team Builder

Implementa tres tipos que usan infer para extraer información de otros tipos. Trabajas a nivel de tipos: completa los TODO hasta que los tests Expect<Equal<...>> queden sin subrayado rojo.

Paso 1: El primer infer

  • ElementoDe<T> extrae el tipo de los elementos de un array con infer U.
  • ElementoDe<Heroe[]> da Heroe; ElementoDe<string[]> da string; ElementoDe<number> da never.
  • Los tres primeros tests en verde.
Ver soluciones 
// Helper de testing de tipos (lo viste en conditional types; se explica a fondo en
// "Testear a nivel de tipos"). Expect<Equal<A, B>> da error si A y B no son iguales.
type Equal<A, B> =
  (<T>() => T extends A ? 1 : 2) extends (<T>() => T extends B ? 1 : 2) ? true : false;
type Expect<T extends true> = T;

interface Heroe {
  nombre: string;
  rol: "Daño" | "Tanque" | "Apoyo";
  partidas: number;
  victorias: number;
}

// ElementoDe<T>: la primera aplicación de infer.
// El conditional pregunta: "¿T es un Array de algo?" Si lo es, ese "algo" se captura
// con infer U y se devuelve. Si T no es un array en absoluto, el resultado es never.
// Así: ElementoDe<Heroe[]> → Heroe ; ElementoDe<string[]> → string ; ElementoDe<number> → never.
type ElementoDe<T> = T extends Array<infer U> ? U : never;

// RetornoDe y PromesaDe quedan pendientes (los tiers siguientes los añaden).
type RetornoDe<T> = unknown;
type PromesaDe<T> = unknown;

declare function obtenerHeroe(): Heroe;
declare function obtenerNombre(): string;
declare function cargarEquipo(): Promise<Heroe[]>;

// Tests del tier ok en verde (los de RetornoDe y PromesaDe siguen en rojo):
type _T1 = Expect<Equal<ElementoDe<Heroe[]>, Heroe>>;
type _T2 = Expect<Equal<ElementoDe<string[]>, string>>;
type _T3 = Expect<Equal<ElementoDe<number>, never>>;

console.log("ElementoDe correcto: infer U captura el tipo de los elementos.");

Por qué este nivel

  • ElementoDe<T> es la forma más directa de ver infer en acción: la condición pregunta si T es un array, y si lo es, infer U captura el tipo de sus elementos para devolverlo.
  • El patrón T extends Array<infer U> ? U : never es tan común que es casi la definición canónica de infer: ves una caja, metes la mano y sacas lo que hay dentro.
  • Funciona, pero RetornoDe y PromesaDe siguen sin implementar: el nivel siguiente aplica el mismo patrón a funciones.