TypeScript Academy · Lección

Condicionales a nivel de tipos

Ramifique según los tipos mediante expresiones de tipos condicionales.

Condicionales a nivel de tipos es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

El if a nivel de tipos

El lenguaje de tipos incorpora bifurcaciones mediante tipos condicionales. La sintaxis T extends U ? X : Y se interpreta así: si T es asignable a U, el resultado es X; de lo contrario, es Y.

Este es el equivalente a nivel de tipos de una expresión if / else.

type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<string>; // "yes"
type B = IsString<number>; // "no"

extends significa asignable

La comprobación no determina la igualdad. T extends U es verdadera cuando un valor de tipo T se podría utilizar donde se espera un U. Los tipos literales son asignables a su tipo base.

type T1 = "hello" extends string ? true : false; // true
type T2 = string extends "hello" ? true : false; // false
type T3 = 42 extends number ? true : false;       // true

Elegir un tipo de resultado

Los condicionales permiten que un genérico devuelva estructuras diferentes según la entrada. Aquí Wrap envuelve las matrices de forma diferente a los valores escalares.

type Wrap<T> = T extends unknown[]
  ? { list: T }
  : { value: T };

type A = Wrap<number>;   // { value: number }
type B = Wrap<string[]>; // { list: string[] }

Filtrado a never

Un recurso habitual consiste en devolver never en una de las ramas. never significa «no hay ningún valor» y resulta útil para eliminar elementos de las uniones más adelante.

type OnlyStrings<T> = T extends string ? T : never;

type A = OnlyStrings<string>; // string
type B = OnlyStrings<number>; // never

Inferencia con infer

La verdadera potencia aparece con la palabra clave infer. Dentro de un condicional, infer introduce una variable de tipo nueva que captura una parte del tipo que coincide.

Aquí capturamos el tipo de los elementos de una matriz.

type ElementType<T> = T extends (infer U)[] ? U : never;

type A = ElementType<number[]>; // number
type B = ElementType<string[]>; // string

Inferencia de resultados de funciones

Puede colocar infer en cualquier lugar del patrón. Para extraer el tipo de retorno de una función, infiera la parte posterior a la flecha. Así es como funciona la utilidad integrada ReturnType.

type MyReturn<T> = T extends (...args: any[]) => infer R ? R : never;

type A = MyReturn<() => number>;      // number
type B = MyReturn<(x: string) => boolean>; // boolean

Inferencia de varias partes

Un solo condicional puede introducir varias variables infer a la vez. Aquí extraemos tanto el primer elemento como el resto de una tupla.

type FirstRest<T> = T extends [infer H, ...infer R]
  ? { head: H; rest: R }
  : never;

type A = FirstRest<[1, 2, 3]>;
// { head: 1; rest: [2, 3] }

Condicionales anidados

Los condicionales se pueden anidar igual que varios else if encadenados. La rama else de un condicional puede ser a su vez otro condicional, formando una cadena de decisiones.

type Describe<T> =
  T extends string ? "text" :
  T extends number ? "num" :
  T extends boolean ? "flag" :
  "other";

type A = Describe<number>; // "num"
type B = Describe<null>;   // "other"

Las condiciones como guardas

Utilice un condicional para verificar una estructura antes de extraer información de ella. Si la entrada no coincide, recurra a never para que el uso incorrecto sea visible.

type GetName<T> = T extends { name: infer N } ? N : never;

type A = GetName<{ name: string }>; // string
type B = GetName<{ age: number }>;  // never

Combinar condiciones

Puede exigir varias condiciones anidándolas. Aquí, para pasar, un tipo debe ser un objeto y tener un id.

type RequireId<T> =
  T extends object
    ? T extends { id: unknown } ? T : never
    : never;

type A = RequireId<{ id: 1; x: 2 }>; // { id: 1; x: 2 }
type B = RequireId<{ x: 2 }>;        // never

Los condicionales están en todas partes

La mayoría de los tipos de utilidad integrados son condicionales internamente: NonNullable, Extract, Exclude, Parameters y ReturnType. Comprender extends ? : le permite dominar todos ellos.

type MyNonNullable<T> = T extends null | undefined ? never : T;

type A = MyNonNullable<string | null>; // string

Comprobación rápida

Compruebe cuánto entiende de los tipos condicionales y de infer.

Resumen

Los tipos condicionales proporcionan al lenguaje de tipos una estructura if/else y coincidencia de patrones.

T extends U ? X : Y bifurca según la asignabilidad.
infer captura las partes coincidentes en variables nuevas.
Los condicionales se anidan para formar cadenas de decisiones.
Devolver never filtra elementos.

A continuación: introducir un condicional en sí mismo para crear recursión.

Preguntas frecuentes

¿La lección «Condicionales a nivel de tipos» es gratis?

Sí — el texto completo de «Condicionales a nivel de tipos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Condicionales a nivel de tipos»?

Ramifique según los tipos mediante expresiones de tipos condicionales. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Condicionales a nivel de tipos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a TypeScript Academy