Fusionar objetos TypeScript

Presentaremos una forma sencilla de fusionar dos o más objetos en un solo objeto y usaremos todas sus propiedades en TypeScript con un ejemplo.

Combinar objetos en TypeScript

Cuando se trabaja con una aplicación cuyos datos se almacenan principalmente en objetos o se obtienen algunos datos de las API en forma de objetos, hay situaciones en las que necesitamos fusionar algunos objetos. Siempre queremos simplificar los problemas en un problema corto que se pueda resolver fácilmente o una solución que se pueda usar fácilmente sin pérdida de datos.

Cuando tenemos múltiples objetos que podrían usarse como un solo objeto, debemos fusionarlos para reducir una carga de múltiples objetos en uno para facilitar su uso.

En este tutorial, veremos dos objetos que contendrán valores diferentes pero que deben fusionarse porque contienen el mismo tipo de datos que necesitamos mostrar en la interfaz o guardar en la base de datos. Vamos a crear dos objetos, languageOne y languageTwo, que contengan los lenguajes de programación que se muestran a continuación.

# typescript
var languageOne = {
    PLA: 'Angular',
    PLB: 'Bash',
    PLC: 'CPlusPlus',
    PLR: 'React'
};

var languageTwo = {
    PLD: 'Dart',
    PLE: 'Express',
    PLF: 'FSharp',
    PLS: 'SWIFT'
};

Ahora, si queremos combinar estos dos objetos en un solo objeto y usar ese objeto para obtener los valores basados en las claves, podemos usar el siguiente método como se muestra a continuación.

# typescript
var languages = {...languageOne, ...languageTwo};

Usando esta línea de código, asignamos ambos objetos a un solo objeto. Podemos llamar fácilmente a las propiedades de cualquier objeto usando el punto y llamando a la propiedad por su clave, como se muestra a continuación.

# typescript
console.log(languages.PLA);
console.log(languages.PLS);

Producción:

Como podemos ver en el ejemplo anterior, con solo una línea de código, podemos fusionar tantos objetos como queramos en un solo objeto. Pero aún así, hay una pregunta esencial que no debemos pasar por alto.

¿Qué sucederá si ambos objetos tienen una o más propiedades iguales?

Veamos otro ejemplo en el que usaremos ambos objetos, pero agregaremos algunas propiedades que existirán en ambos objetos y veamos cómo funciona. Los objetos que usaremos se muestran a continuación.

# typescript
var languageOne = {
    PLA: 'Angular',
    PLB: 'Bash',
    PLC: 'CPlusPlus',
    PLR: 'React',
    PLF: 'Flex'
};

var languageTwo = {
    PLD: 'Dart',
    PLE: 'Express',
    PLF: 'FSharp',
    PLS: 'SWIFT',
    PLC: 'CSharp'
};

Ahora, combinemos estos objetos en otro usando el mismo método que usamos arriba, como se muestra a continuación.

# typescript
var languages = {...languageOne, ...languageTwo};

Ahora, llamemos a las propiedades PLC y PLF usando el mismo método que usamos en el ejemplo anterior.

# typescript
console.log(languages.PLC);
console.log(languages.PLF);

Producción:

Como podemos ver en el ejemplo anterior, obtuvimos las propiedades solo del segundo objeto. Ahora, invirtamos los objetos y verifiquemos el resultado como se muestra a continuación.

# typescript
var languages = {...languageTwo, ...languageOne};

console.log(languages.PLC);
console.log(languages.PLF);

Producción:

Como podemos ver en el ejemplo anterior, al fusionar los dos objetos, las propiedades presentes en ambos objetos se actualizan según el orden de los objetos en los que los estamos fusionando. Entonces, si tenemos algunos datos únicos y queremos conservar todos los datos sin actualizar las propiedades, no es posible con este método.

Pero si queremos actualizar las propiedades en función del orden de los objetos, podemos usar este método, que te funcionará muy bien.