We often do object copying in TypeScript because everything is an object. If you want to create a deep copy of an Object in TypeScript, we can use a combination of JSON.parse and JSON.stringify or use an external library called Lodash.
Ways to create a deep copy of an Object in TypeScript
TypeScript does not provide a method to create a deep copy of an Object, only Object.Assign can be used to perform shallow copy, but we can use some ways to get around it by combining JSON.parse and JSON.stringify, or you can use a library called Lodash.
Using JSON.parse and JSON.stringify
This way, you can do a deep copy of an object, but it will not include functions. The JSON.stringify method will convert the whole object into a json string then we use JSON.parse to convert it back to a new object without referencing the old object at all.
Example:
// We will create an object that has many nested sub-objects
const object: { price: number[]; name: string[] }[] = [
{ price: [99, 199, 299, 399], name: ["apple", "banana", "cherry", "kiwi"] },
{ price: [99, 199, 299, 399], name: ["apple", "banana", "cherry", "kiwi"] },
{ price: [99, 199, 299, 399], name: ["apple", "banana", "cherry", "kiwi"] },
{ price: [99, 199, 299, 399], name: ["apple", "banana", "cherry", "kiwi"] },
];
// We will first convert this object to a Json string
const objectJson = JSON.stringify(object);
// Then we will convert this Json string to object
const objectCopied = JSON.parse(objectJson);
// We get a new object consisting of nested child objects.
console.log(objectCopied);Output:
[
{
price: [99, 199, 299, 399],
name: ["apple", "banana", "cherry", "kiwi"],
},
{
price: [99, 199, 299, 399],
name: ["apple", "banana", "cherry", "kiwi"],
},
{
price: [99, 199, 299, 399],
name: ["apple", "banana", "cherry", "kiwi"],
},
{
price: [99, 199, 299, 399],
name: ["apple", "banana", "cherry", "kiwi"],
},
]Using Lodash library
By using this library’s cloneDeep() method, we can copy nested objects and also functions in that object.
Example:
// We import the lodash library
import * as lodash from "lodash";
// We will create an object that has many nested sub-objects
const object: { price: number[]; name: string[] }[] = [
{ price: [99, 199, 299, 399], name: ["apple", "banana", "cherry", "kiwi"] },
{ price: [99, 199, 299, 399], name: ["apple", "banana", "cherry", "kiwi"] },
{ price: [99, 199, 299, 399], name: ["apple", "banana", "cherry", "kiwi"] },
{ price: [99, 199, 299, 399], name: ["apple", "banana", "cherry", "kiwi"] },
];
// Use the cloneDeep() method to perform a deep copy of the object
const objectCopied = lodash.cloneDeep(object);
console.log(objectCopied);Output:
[
{
price: [99, 199, 299, 399],
name: ["apple", "banana", "cherry", "kiwi"],
},
{
price: [99, 199, 299, 399],
name: ["apple", "banana", "cherry", "kiwi"],
},
{
price: [99, 199, 299, 399],
name: ["apple", "banana", "cherry", "kiwi"],
},
{
price: [99, 199, 299, 399],
name: ["apple", "banana", "cherry", "kiwi"],
},
]Summary
To conclude, to create a deep copy of an Object in TypeScript, we will use a combination of JSON.parse and JSON.stringify or use the Lodash library. We should use the Lodash library in case we want to copy the whole function in the object.
Carolyn Hise has three years of software development expertise. Strong familiarity with the following languages is required: Python, Typescript/Nodejs, .Net, Java, C++, and a strong foundation in Object-oriented programming (OOP).