Mapeo de objetos 🤹 en JavaScript y TypeScript: simplificación de datos 🔡 Transformaciones ♻️

El mapeo de objetos, también conocido como transformación de objetos o conversión de objetos, es una técnica utilizada para convertir datos de una forma de objeto a otra aplicando un conjunto específico de reglas o lógica. Es particularmente útil cuando se trata de datos recibidos de API, bases de datos o fuentes externas que pueden no coincidir con el formato requerido por la aplicación.

Considere un escenario en el que recibe datos de usuario de una API en el siguiente formato:

// Datos de API
const usuarioapi = {
identificación: 123,
nombre: 'Juan',
apellido: 'Doe',
correo electrónico: 'john.doe@example.com',
edad: 30,
isActive: verdadero,
};

Sin embargo, en su aplicación, debe utilizar el siguiente formato para los datos del usuario:

// Formato requerido en la aplicación
const usuarioaplicación = {
ID de usuario: 123,
nombre: 'John Doe',
contacto: {
correo electrónico: 'john.doe@example.com',
isActive: verdadero,
},
};

Aquí, el mapeo de objetos se puede utilizar para transformar apiUsuario en usuario de la aplicación.

En JavaScript, el mapeo de objetos se puede lograr utilizando varias técnicas, como para…en bucles, mapa() función y enfoques modernos como la desestructuración y difusión de objetos. Exploremos estos métodos con ejemplos:

Usando for… en bucle:

función mapUser(apiUser) {
const usuarioaplicación = {};

para (clave constante en apiUser) {
interruptor (tecla) {
Identificación del caso':
appUser.userId = apiUser[key];
romper;
caso 'nombre':
caso 'apellido':
if (!appUser.name) {
appUser.name = '';
}
appUser.name += apiUser[key] + ' ';
romper;
caso 'correo electrónico':
caso 'isActive':
si (!appUser.contact) {
appUser.contact = {};
}
appUser.contacto[key] = usuarioapi[key];
romper;
por defecto:
romper;
}
}

appUser.name = appUser.name.trim();

devolver usuario de aplicación;
}

Este código define un mapaUsuario función en JavaScript, que requiere una apiUsuario objeto como entrada y devuelve un transformado usuario de la aplicación objeto. El propósito de esta función es realizar mapeo de objetos, convirtiendo datos de una forma de objeto (apiUser) a otra (appUser) según reglas específicas.

En pocas palabras el mapaUsuario La función toma un objeto de entrada (apiUser) y lo convierte en un nuevo objeto (appUser) con una forma diferente según reglas específicas. Extrae propiedades específicas, concatena las primero y último nombre en un solo nombre propiedad y agrupa la correo electrónico y está activo propiedades bajo el contacto objeto. La resultante usuario de la aplicación Luego, el objeto se devuelve como salida.

Uso de la desestructuración y difusión de objetos:

función mapUser(apiUser) {
const {id, nombre, apellido, correo electrónico, isActive} = apiUser;
const usuarioaplicación = {
ID de usuario: identificación,
nombre: `${nombre} ${apellido}`,
contacto: {correo electrónico, está activo},
};
devolver usuario de aplicación;
}

Este código define un mapaUsuario función en JavaScript que realiza el mapeo de objetos. La función toma una apiUsuario objeto como entrada y devuelve un transformado usuario de la aplicación objeto.

En resumen, el mapaUsuario La función toma un objeto de entrada (apiUser) y lo convierte en un nuevo objeto (appUser) con una forma diferente. Utiliza la desestructuración de objetos para extraer propiedades específicas del apiUsuario objeto y crea un objeto de contacto anidado con correo electrónico y propiedades isActive. La resultante usuario de la aplicación Luego, el objeto se devuelve como salida, representando los datos mapeados.

En TypeScript, el mapeo de objetos se puede llevar al siguiente nivel con la ventaja adicional de la seguridad de tipos y la inferencia de tipos. TypeScript le permite definir interfaces o tipos que representan las formas de sus datos, lo que facilita la detección de errores relacionados con el tipo durante el desarrollo.

Veamos cómo se puede realizar el mapeo de objetos en TypeScript:

interfaz APIUser {
número de identificación;
nombre: cadena;
apellido: cadena;
correo electrónico: cadena;
edad: número;
isActive: booleano;
}

interfaz AppUser {
ID de usuario: número;
nombre: cadena;
contacto: {
correo electrónico: cadena;
isActive: booleano;
};
}

función mapUser(apiUser: APIUser): AppUser {
const {id, nombre, apellido, correo electrónico, isActive} = apiUser;
const usuarioaplicación: usuarioaplicación = {
ID de usuario: identificación,
nombre: `${nombre} ${apellido}`,
contacto: {correo electrónico, está activo},
};
devolver usuario de aplicación;
}

Este fragmento de código define dos interfaces, Usuario API y Usuario de la aplicación, que representa la forma de los datos para un usuario de API y el usuario de la aplicación transformada, respectivamente. También incluye una función llamada mapaUsuario que toma un objeto de tipo Usuario API como entrada y devuelve un objeto de tipo Usuario de la aplicación.

En pocas palabras, el fragmento de código demuestra cómo utilizar interfaces para definir la estructura de datos para un usuario API (APIUser) y el usuario de la aplicación transformada (AppUser). La función mapUser realiza efectivamente el mapeo de objetos al convertir datos de APIUser a AppUser, adhiriéndose a las interfaces definidas.

En escenarios del mundo real, los objetos suelen contener propiedades opcionales. Al realizar el mapeo de objetos, es esencial manejar estas propiedades opcionales con cuidado. TypeScript le permite definir propiedades opcionales en sus interfaces usando el ? símbolo.

Considere una actualización Usuario API interfaz con un opcional edad propiedad:

interfaz APIUser {
número de identificación;
nombre: cadena;
apellido: cadena;
correo electrónico: cadena;
¿edad?: número; // propiedad opcional
isActive: booleano;
}

Ahora, actualicemos nuestra función de mapeo de objetos para manejar el opcional edad propiedad:

función mapUser(apiUser: APIUser): AppUser {
const {id, nombre, apellido, correo electrónico, edad, está activo} = apiUser;
const usuarioaplicación: usuarioaplicación = {
ID de usuario: identificación,
nombre: `${nombre} ${apellido}`,
contacto: {correo electrónico, está activo},
};

si (edad) {
appUser.contact.age = edad;
}

devolver usuario de aplicación;
}

Este fragmento de código define una función llamada mapaUsuarioque toma un objeto de tipo Usuario API como entrada y devuelve un objeto de tipo Usuario de la aplicación. La función realiza un mapeo de objetos para transformar datos de Usuario API a Usuario de la aplicaciónrespetando los tipos definidos.

Esto resume toda mi explicación desde el principio de este artículo. Por eso me gustaría guiarnos por cada paso de este último fragmento de código.

Explicación del fragmento de código:

const { id, nombre, apellido, correo electrónico, edad, isActive } = apiUser;: Deestructura el objeto apiUser de entrada para extraer sus propiedades id, nombre, apellido, correo electrónico, edad e isActive.const appUser: AppUser = { … } : Inicializa un nuevo objeto llamado appUser, que almacenará los datos transformados. Se adhiere a la estructura definida por la interfaz AppUser.userId: id,: Asigna el valor de id del objeto apiUser de entrada a la propiedad userId del objeto appUser.name: `${firstName} ${lastName}`,: Concatena los valores de nombre y apellido con un espacio entre ellos, y asigna la cadena resultante a la propiedad de nombre del objeto appUser.contact: { email, isActive },: Crea un objeto de contacto anidado dentro de appUser y asigna las propiedades email e isActive de el objeto apiUser de entrada a las propiedades correspondientes en contact.if (edad) {…}: Comprueba si la propiedad de edad del objeto apiUser de entrada existe y tiene un valor verdadero.appUser.contact.age = edad;: Si la edad La propiedad existe y tiene un valor veraz, asigna el valor de edad a la propiedad edad del objeto appUser.contact.return appUser;: El objeto appUser transformado se devuelve como resultado de la función mapUser.

En resumen, el mapaUsuario La función realiza el mapeo de objetos al convertir datos de un Usuario API oponerse a una Usuario de la aplicación objeto. Crea un nuevo objeto con la estructura requerida y asigna valores del objeto de entrada en consecuencia. Si la propiedad de edad existe, se incluye en el objeto de contacto anidado del resultado. Usuario de la aplicación objeto.

El mapeo de objetos es una técnica poderosa en JavaScript y TypeScript que le permite transformar datos entre diferentes formas de objetos de manera eficiente. Simplifica las transformaciones de datos, haciendo que su código sea más legible y fácil de mantener. En TypeScript, el mapeo de objetos se vuelve aún más valioso ya que aprovecha el sistema de tipos para detectar errores durante el desarrollo, proporcionando una base de código más sólida y segura.

Al comprender las diversas técnicas de mapeo de objetos y aprovechar el sistema de tipos de TypeScript, puede administrar de manera efectiva estructuras de datos complejas en sus aplicaciones web y optimizar el proceso de transformación de datos.

¿Encuentra útil este artículo? Deja un me gusta y comenta. Gracias 🙏.