Borislav Hadzhiev
Wed Mar 02 2022·2 min read
Photo by Joshua Earle
To create a deep copy of an array in TypeScript:
JSON.stringify()
method to stringify the array.JSON.parse()
method to parse the string back to an array.const arr = [ { id: 1, address: { country: 'Germany' } }, { id: 2, address: { country: 'Chile' } }, { id: 3, address: { country: 'UK' } }, ]; /** * 👇️ const copy: { id: number; address: { country: string; }; }[] */ const copy = JSON.parse(JSON.stringify(arr)) as typeof arr; console.log(copy);
We used the JSON.stringify method to convert the array to a JSON string.
console.log(typeof JSON.stringify([])); // 👉️ "string"
As a result all of the references to specific objects in memory are lost.
The next step is to parse the JSON string back to an array by using the JSON.parse method.
// 👇️ true console.log(Array.isArray(JSON.parse(JSON.stringify([]))));
At this point we have a deep copy of the original array, but its typed as any
,
so we need to use a
type assertion
to set its type to the type of the original array.
const arr = [ { id: 1, address: { country: 'Germany' } }, { id: 2, address: { country: 'Chile' } }, { id: 3, address: { country: 'UK' } }, ]; /** * 👇️ const copy: { id: number; address: { country: string; }; }[] */ const copy = JSON.parse(JSON.stringify(arr)) as typeof arr; console.log(copy);
If you now mutate the copied array, you won't change the contents of the original array.
const arr = [ { id: 1, address: { country: 'Germany' } }, { id: 2, address: { country: 'Chile' } }, { id: 3, address: { country: 'UK' } }, ]; const copy = JSON.parse(JSON.stringify(arr)) as typeof arr; copy.pop(); console.log(copy.length); // 👉️ 2 console.log(arr.length); // 👉️ 3
We used the pop()
method to remove the last element from the copy
array, but
the original array remained the same.
To create a deep copy of an array 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 array 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:
npm i lodash.clonedeep npm i --save-dev @types/lodash.clonedeep
Now we are able to import and use the cloneDeep
method.
import cloneDeep from 'lodash.clonedeep'; const arr = [ { id: 1, address: { country: 'Germany' } }, { id: 2, address: { country: 'Chile' } }, { id: 3, address: { country: 'UK' } }, ]; /** * 👇️ const copy: { id: number; address: { country: string; }; }[] */ const copy = cloneDeep(arr); console.log(copy);
The cloneDeep
method takes a value as a parameter, recursively clones it and
returns the result.
You can test removing an element from the copied array and comparing the length of the two arrays.
import cloneDeep from 'lodash.clonedeep'; const arr = [ { id: 1, address: { country: 'Germany' } }, { id: 2, address: { country: 'Chile' } }, { id: 3, address: { country: 'UK' } }, ]; const copy = cloneDeep(arr); copy.pop(); console.log(copy.length); // 👉️ 2 console.log(arr.length); // 👉️ 3