ProgramaciónDesarrollador Senior de TypeScript

¿Qué son los tipos mapeados en TypeScript y cómo se pueden utilizar para crear tipos genéricos flexibles? Detalle los matices de su uso y las trampas potenciales.

Supere entrevistas con el asistente de IA Hintsage

Respuesta.

Los tipos mapeados son tipos que se construyen dinámicamente al transformar (renombrar, modificar) todas las propiedades de otro tipo. La sintaxis se basa en la construcción in:

type Readonly<T> = { readonly [K in keyof T]: T[K]; } type User = { name: string; age: number; } const u: Readonly<User> = { name: 'Eve', age: 22 }; u.name = 'Bob'; // Error: name es de solo lectura

Matices:

  • Se pueden modificar los modificadores (readonly, optional), eliminarlos o agregarlos a través de la palabra clave -? o +?.
  • Pueden aplicarse de forma anidada, combinarse con tipos condicionales, tipos de utilidad y genéricos.
  • No siempre es fácil rastrear errores en la fase de desarrollo, especialmente con la modificación compleja y anidada de jerarquías de tipos.

Ejemplo con todos los modificadores:

type PartialMutable<T> = { -readonly [K in keyof T]?: T[K]; };

Pregunta capciosa.

«Al aplicar un tipo mapeado con el modificador optional, ¿afecta esto solo a las propiedades de primer nivel o también a los objetos anidados?»

Respuesta: No, el tipo mapeado con optional ? afecta SOLAMENTE a las propiedades de primer nivel. Los objetos anidados deben transformarse por separado, a menudo utilizando recursión o tipos mapeados adicionales.

Ejemplo:

type DeepPartial<T> = { [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K]; };

Ejemplos de errores reales debido a la falta de conocimiento sobre los matices del tema.


Historia

En un proyecto, por ahorrar tiempo, se aplicó el estándar Partial<T> para un volumen profundo de formulario. Sin embargo, los campos de segundo y tercer nivel no se volvieron opcionales, lo que llevó a errores inesperados en tiempo de ejecución debido a la ausencia de claves anidadas.


Historia

Se intentó eliminar propiedades readonly solo en los objetos hijos, aplicando un tipo mapeado solo al nivel superior:

type Mutable<T> = { -readonly [K in keyof T]: T[K] }

Como resultado, los campos de tipo { readonly foo: { readonly bar: number } } permanecieron inalterados en la anidación, lo que confundió al equipo y complicó el mantenimiento.


Historia

En un modelo de datos complejo, se aplicaron tipos mapeados anidados para la intersección de varios tipos de utilidad (por ejemplo, Readonly & Partial). Debido al orden incorrecto de su composición, surgieron conflictos inesperados de compatibilidad de tipos, y el compilador comenzó a emitir mensajes de error confusos.