0Pricing
React Academy · Lección

Tipos condicionales y mapeados en React

Cree tipos de props de componentes cuya forma cambie según los valores de otras props mediante tipos condicionales.

Tipos condicionales y mapeados en React es una lección gratuita de React 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 React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Conceptos básicos de los tipos condicionales

Un tipo condicional usa la sintaxis T extends U ? X : Y: si T se puede asignar a U, el tipo se resuelve como X; de lo contrario, como Y.

type IsString<T> = T extends string ? true : false;

type A = IsString<string>;  // true
type B = IsString<number>;  // false
type C = IsString<'hello'>; // true

Props condicionales según otras props

Use tipos condicionales para hacer que una prop sea obligatoria u opcional según el valor de otra prop.

type InputProps<T extends 'text' | 'number'> = {
  type: T;
} & (T extends 'number' ? { min?: number; max?: number } : { maxLength?: number });

const numInput: InputProps<'number'> = { type: 'number', min: 0, max: 100 };
const txtInput: InputProps<'text'> = { type: 'text', maxLength: 50 };

Tipos mapeados

Los tipos mapeados crean un tipo nuevo transformando cada propiedad de un tipo existente. La sintaxis in keyof itera sobre todas las claves.

type Optional<T> = { [K in keyof T]?: T[K] };
type Readonly<T> = { readonly [K in keyof T]: T[K] };
type Nullable<T> = { [K in keyof T]: T[K] | null };

Hacer que las props sean opcionales en formularios de actualización

Use Partial<T> (un tipo mapeado integrado) para las props de formularios de actualización en los que no todos los campos son obligatorios.

interface User { id: string; name: string; email: string; role: string; }

// Update form — all fields optional:
type UserUpdateProps = Partial<Omit<User, 'id'>>;

function UserUpdateForm(props: UserUpdateProps) {
  // name, email, role are all optional
}

Record con tipos mapeados

Cree tipos de consulta cuyos valores tengan una estructura coherente y cuyas claves provengan de una unión.

type Status = 'idle' | 'loading' | 'success' | 'error';

type StatusConfig = Record<Status, {
  label: string;
  icon: React.ReactNode;
  color: string;
}>;

const statusConfig: StatusConfig = {
  idle: { label: 'Ready', icon: <ReadyIcon />, color: 'gray' },
  loading: { label: 'Loading...', icon: <Spinner />, color: 'blue' },
  success: { label: 'Done', icon: <CheckIcon />, color: 'green' },
  error: { label: 'Error', icon: <XIcon />, color: 'red' },
};

Seleccionar claves obligatorias

Use tipos condicionales con -? (elimina la opcionalidad) para extraer solo las claves obligatorias de un tipo.

type RequiredKeys<T> = {
  [K in keyof T]-?: undefined extends T[K] ? never : K;
}[keyof T];

interface FormData { name: string; email: string; phone?: string; }
type Required = RequiredKeys<FormData>; // 'name' | 'email'

Tipos de literales de plantilla

Los tipos de literales de plantilla combinan tipos de literales de cadena, lo que permite tipar nombres de eventos, cadenas de clases CSS y rutas de API.

type EventName = 'click' | 'change' | 'focus';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onChange' | 'onFocus'

type ApiPath<R extends string> = `/api/${R}`;
type UserPath = ApiPath<'users'>; // '/api/users'

Extracción condicional de props

Use Extract y Exclude para filtrar tipos de unión.

type AllProps = 'onClick' | 'onHover' | 'onChange' | 'style';
type EventHandlers = Extract<AllProps, `on${string}`>;
// 'onClick' | 'onHover' | 'onChange'

type NonEventProps = Exclude<AllProps, `on${string}`>;
// 'style'

Tipos mapeados para la validación de formularios

Genere tipos de errores de validación que reflejen la estructura de los datos del formulario: una cadena con el mensaje de error para cada campo.

interface LoginForm { email: string; password: string; }

type FormErrors<T> = { [K in keyof T]?: string };
type LoginErrors = FormErrors<LoginForm>;
// { email?: string; password?: string }

const errors: LoginErrors = { email: 'Invalid email format' };

Tipos mapeados discriminados

Combine tipos mapeados con tipos condicionales para crear tipos cuya estructura cambie según un discriminante.

type EventMap = {
  click: { x: number; y: number };
  keydown: { key: string; code: string };
  resize: { width: number; height: number };
};

type Handler<E extends keyof EventMap> = (event: EventMap[E]) => void;

function on<E extends keyof EventMap>(event: E, handler: Handler<E>) {
  window.addEventListener(event, handler as EventListener);
}

Cuándo no sobrediseñar los tipos

Los tipos condicionales y mapeados ofrecen más potencia, pero también añaden complejidad. Úselos cuando eliminen duplicación real o eviten errores concretos, no solo para demostrar sus conocimientos de TypeScript.

Comprobación rápida

¿Qué hace el tipo mapeado { [K in keyof T]?: T[K] }?

Resumen

Los tipos condicionales (T extends U ? X : Y) crean tipos que se ramifican según la asignabilidad. Los tipos mapeados ([K in keyof T]) transforman cada propiedad de un tipo. Úselos para tipos parciales de formularios de actualización, mapas de eventos tipados, estructuras de errores de formularios y rutas de API con literales de plantilla.

Preguntas frecuentes

¿La lección «Tipos condicionales y mapeados en React» es gratis?

Sí — el texto completo de «Tipos condicionales y mapeados en React» 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 React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Tipos condicionales y mapeados en React»?

Cree tipos de props de componentes cuya forma cambie según los valores de otras props mediante tipos condicionales. Practicas React 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 React Academy?

No se requiere experiencia previa. React 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 «Tipos condicionales y mapeados en React»?

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 React Academy?

Sí. Cada lección de React 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

  1. Uniones discriminadas para variantes de componentes
  2. Tipos condicionales y mapeados en React
  3. Componentes polimórficos con la prop 'as'
  4. Formularios con seguridad de tipos y contratos de respuestas de API
← Volver a React Academy