Create a Deep Copy of an Object in TypeScript

Table of Contents #

Create a Deep Copy of an Object in TypeScript #

To create a deep copy of an object in TypeScript:

Use the JSON.stringify() method to stringify the object.
Use the JSON.parse() method to parse the string back to an object.
Use a type assertion to type the copied object.

index.ts

Copied!
const obj = {
  person: {
    name: {
      first: 'James',
      last: 'Doe',
    },
    address: {
      country: 'Chile',
      city: 'Santiago',
    },
  },
};

const copy = JSON.parse(JSON.stringify(obj)) as typeof obj;

console.log(copy);

We used the JSON.stringify method to convert the object to a JSON string.

index.ts

Copied!
console.log(typeof JSON.stringify({})); // 👉️ "string"

As a result all of the references to nested objects or arrays are lost.

The next step is to parse the JSON string back to an object by using the JSON.parse method.

index.ts

Copied!
// 👇️ "object"
console.log(typeof JSON.parse(JSON.stringify({})));

At this point we have a deep copy of the original object, but its typed as any, so we need to use a type assertion to set its type to the type of the original object.

index.ts

Copied!
const obj = {
  person: {
    name: {
      first: 'James',
      last: 'Doe',
    },
    address: {
      country: 'Chile',
      city: 'Santiago',
    },
  },
};

const copy = JSON.parse(JSON.stringify(obj)) as typeof obj;

console.log(copy);

Converting the object to a JSON string makes all of the nested arrays or objects lose their reference.

If you now mutate the copied object, you won't change the contents of the original object.

index.ts

Copied!
const obj = {
  person: {
    name: {
      first: 'James',
      last: 'Doe',
    },
    address: {
      country: 'Chile',
      city: 'Santiago',
    },
  },
};

const copy = JSON.parse(JSON.stringify(obj)) as typeof obj;

console.log(copy);

copy.person.name.first = 'Alice';

console.log(obj.person.name.first); // 👉️ "James"

Changing the value of a property in the copy object does not change the value in the original object, because the nested objects and arrays point to different locations in memory.

Create a Deep Copy of an Object using Lodash #

To create a deep copy of an object in TypeScript, install and use the lodash.clonedeep package. The cloneDeep method recursively clones a value and returns the result. The cloneDeep method returns an object of the correct type.

Open your terminal in the root directory of your project and install the lodash.clonedeep package with the following 2 commands:

shell

Copied!
npm i lodash.clonedeep

npm i --save-dev @types/lodash.clonedeep

Now we are able to import and use the cloneDeep method.

index.ts

Copied!
import cloneDeep from 'lodash.clonedeep';

const obj = {
  person: {
    name: {
      first: 'James',
      last: 'Doe',
    },
    address: {
      country: 'Chile',
      city: 'Santiago',
    },
  },
};

const copy = cloneDeep(obj);

console.log(copy);

The cloneDeep method takes a value as a parameter, recursively clones it and returns the result.

Notice that we didn't even have to use a type assertion as the method returns a value with the correct type.

You can test changing a value in the copy object and checking if the value has changed in the original object.

index.ts

Copied!
import cloneDeep from 'lodash.clonedeep';

const obj = {
  person: {
    name: {
      first: 'James',
      last: 'Doe',
    },
    address: {
      country: 'Chile',
      city: 'Santiago',
    },
  },
};

const copy = cloneDeep(obj);

copy.person.name.first = 'Alice';

console.log(obj.person.name.first); // 👉️ "James"

Create a Deep Copy of an Object in TypeScript

Table of Contents #

Create a Deep Copy of an Object in TypeScript #

Create a Deep Copy of an Object using Lodash #

Borislav Hadzhiev