Tipos mapeados y tipos condicionales
Construya tipos mapeados para transformar todas las propiedades de un tipo y use tipos condicionales con infer para aplicar lógica avanzada a nivel de tipos.
Tipos mapeados y tipos condicionales es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Tipos mapeados — transformar cada propiedad
Los tipos mapeados recorren las claves de un tipo y las transforman. Son la base de los tipos de utilidad Partial, Readonly y Record.
// Partial implemented as a mapped type:
type MyPartial<T> = {
[K in keyof T]?: T[K];
};
// Readonly:
type MyReadonly<T> = {
readonly [K in keyof T]: T[K];
};Remapeo de claves con as
Use as en la cláusula de mapeo para cambiar los nombres de las claves. Combínelo con tipos de literales de plantilla para realizar transformaciones avanzadas.
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }Filtrado de propiedades con never
Devuelva never al remapear una clave para eliminar esa propiedad del tipo resultante.
// Keep only function-valued properties:
type FunctionProperties<T> = {
[K in keyof T as T[K] extends Function ? K : never]: T[K];
};Tipos condicionales — if/else para tipos
Los tipos condicionales utilizan el patrón T extends U ? TrueType : FalseType. Se evalúan en el nivel de tipos, no durante la ejecución.
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false
type Flatten<T> = T extends Array<infer E> ? E : T;
type StrArr = Flatten<string[]>; // string
type Num = Flatten<number>; // numberTipos condicionales distributivos
Cuando T es una unión, los tipos condicionales se distribuyen entre cada miembro. string | number extends string ? ... comprueba cada uno por separado: (string extends string ? ...) | (number extends string ? ...).
type ToArray<T> = T extends any ? T[] : never;
type StringOrNumberArray = ToArray<string | number>;
// string[] | number[] (not (string | number)[])Uso de infer para extraer tipos
infer R introduce una variable de tipo que TypeScript completa. Permite capturar partes de la estructura de un tipo.
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type Resolved = UnwrapPromise<Promise<string>>; // string
type Direct = UnwrapPromise<number>; // numberTipos de literales de plantilla
Los tipos de literales de plantilla utilizan la misma sintaxis de comillas invertidas que los literales de plantilla, pero en el nivel de tipos, y crean tipos unión a partir de combinaciones de literales de cadena.
type Side = 'top' | 'right' | 'bottom' | 'left';
type PaddingKey = `padding-${Side}`;
// 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left'
type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'Combinar tipos mapeados y condicionales
Los patrones más potentes de TypeScript combinan ambos tipos. Los tipos integrados required, partial, readonly y record son todos tipos mapeados.
// Make all functions in an object async:
type Asyncify<T> = {
[K in keyof T]: T[K] extends (...args: infer A) => infer R
? (...args: A) => Promise<R>
: T[K];
};DeepPartial — tipo de utilidad recursivo
El tipo integrado Partial solo llega a un nivel de profundidad. DeepPartial recurre en los objetos anidados.
type DeepPartial<T> = {
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};Uso en el mundo real: tipos de respuesta de API
Los tipos mapeados y condicionales permiten derivar tipos de API potentes; por ejemplo, extraer solo las propiedades serializables a JSON de un objeto.
Evite la sobreingeniería
Las operaciones complejas con tipos pueden dificultar la comprensión del código. Pregúntese siempre: ¿sería más claro un alias de tipo o una interfaz más sencillos? Los tipos deben documentar la intención, no demostrar dominio de TypeScript.
Comprobación rápida
¿Qué resultado produce T extends U ? A : B cuando T es un tipo unión?
Recapitulación: tipos mapeados y condicionales
Los tipos mapeados iteran sobre las claves con [K in keyof T]. Utilice as para volver a mapear las claves. Devuelva never para filtrar. Tipos condicionales: T extends U ? A : B. infer extrae variables de tipo. Los tipos de plantilla literal construyen uniones de cadenas. Combine ambos para realizar transformaciones potentes, como DeepPartial y Asyncify.
Preguntas frecuentes
¿La lección «Tipos mapeados y tipos condicionales» es gratis?
Sí — el texto completo de «Tipos mapeados y tipos condicionales» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Tipos mapeados y tipos condicionales»?
Construya tipos mapeados para transformar todas las propiedades de un tipo y use tipos condicionales con infer para aplicar lógica avanzada a nivel de tipos. Practicas Frontend 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 Frontend Academy?
No se requiere experiencia previa. Frontend 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 3 de 4.
¿Cuánto tiempo toma la lección «Tipos mapeados y tipos condicionales»?
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 Frontend Academy?
Sí. Cada lección de Frontend 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
- Genéricos: T extends y restricciones
- Tipos utilitarios: Partial Required Pick Omit
- Tipos mapeados y tipos condicionales
- Narrowing: typeof instanceof uniones discriminadas