Merge Objects in TypeScript

In this article, we will learn How to Merge Objects in TypeScript. To merge objects, you can use the following.

spread operator
Object.Assign
Lodash merge function

Table of Contents

Using spread operator

In TypeScript, the Easiest way to merge objects using the spread operator. The spread operator is a feature of ES6, you will need to target ES6 or later when you compile.

Here is an Example:

const empNameObject = {
  name : 'John',
  lastname: 'pointing'
};

const empAddressObject={
  street :'Main 10th Road',
  city : 'NY'
};

const mergeObject = {
  ...empNameObject,...empAddressObject
};

console.log(mergeObject);

In the above example, the mergeObject is a new object that contains all the properties from empNameObject and em AddressObject.

Output:

{
name: ‘John’,
lastname: ‘pointing’,
street: ‘Main 10th Road’,
city: ‘NY’
}

Using Object.assign

The “Object.assign” method copies all the enumerable & own properties from one or many source objects to a target object and it is a built-in function.

This function can work similarly to a spread operator.

const empNameObject = {
  name : 'John',
  lastname: 'pointing'
};

const empAddressObject={
  street :'Main 10th Road',
  city : 'NY'
};

const empSalaryObject={
  salary : 50000,
  increment : 10
};


const mergeObjectAssign = Object.assign({}, empNameObject,empAddressObject,empSalaryObject);
 
console.log(mergeObjectAssign);

Output:

{
  name: 'John',
  lastname: 'pointing',
  street: 'Main 10th Road',
  city: 'NY',
  salary: 50000,
  increment: 10
}

Using Lodash Merge Function

The “Lodash” merge function is used to merge two or more objects together, creating a new object that contains the properties and values from the source objects It merges complex values.

import * as lodashMerge from 'lodash';
const lodashObject ={
  Email : "Fleming@test.com",  
  DisplayName: "Flemin",
  Address : {
          firstName : "Flemin@test.com",
          lastName: "Fleming",
          street:"Abc",
          city:"New york",
          state :"NY",
          zipCode: "2341"
}
};

const lodashObjectsalary ={
  salary : 45000,
  increment:{
    firstQ : 10,
    secondQ : 15
  }
};
const MergeLodashObject =  lodashMerge.merge(lodashObject,lodashObjectsalary); 

console.log(MergeLodashObject);

Output:

{
  Email: 'Fleming@test.com',
  DisplayName: 'Flemin',
  Address: {
    firstName: 'Flemin@test.com',
    lastName: 'Fleming',
    street: 'Abc',
    city: 'New york',
    state: 'NY',
    zipCode: '2341'
  },
  salary: 45000,
  increment: { firstQ: 10, secondQ: 15 }
}

More Article – remove duplicates from an Array in TypeScript