Deep clone an Object and preserve its Type in TypeScript

# Table of Contents

# Deep clone an Object and preserve its Type 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: 'Bobby',
      last: 'Hadz',
    },
    address: {
      country: 'Chile',
      city: 'Santiago',
    },
  },
};

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

console.log(copy);

deep clone object and preserve its type

The code for this article is available on GitHub

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 into 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 it's 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: 'Bobby',
      last: 'Hadz',
    },
    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: 'Bobby',
      last: 'Hadz',
    },
    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); // 👉️ "Bobby"

Changing the value of a property in the copy doesn't change the value in the original object because the nested objects and arrays point to different locations in memory.

I've also written an article on how to create a deep copy of an array.

# Create a Deep Copy of an Object using Lodash

Alternatively, you can use the lodash.clonedeep package.

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

install lodash clone deep

Now we can import and use the cloneDeep method.

index.ts

Copied!
import cloneDeep from 'lodash.clonedeep';

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

const copy = cloneDeep(obj);

console.log(copy);

create deep copy of object using lodash

The code for this article is available on GitHub

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: 'Bobby',
      last: 'Hadz',
    },
    address: {
      country: 'Chile',
      city: 'Santiago',
    },
  },
};

const copy = cloneDeep(obj);

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

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

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Deep clone an Object and preserve its Type in TypeScript

# Table of Contents

# Deep clone an Object and preserve its Type in TypeScript

# Create a Deep Copy of an Object using Lodash

Borislav Hadzhiev