Create a Deep Copy of an Array in TypeScript

Table of Contents #

Create a Deep Copy of an Array in TypeScript #

To create a deep copy of an array in TypeScript:

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

index.ts

Copied!
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.

index.ts

Copied!
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.

index.ts

Copied!
// 👇️ 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.

index.ts

Copied!
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);

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

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

index.ts

Copied!
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.

Create a Deep Copy of an Array using Lodash #

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:

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 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.

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 removing an element from the copied array and comparing the length of the two arrays.

index.ts

Copied!
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

Create a Deep Copy of an Array in TypeScript

Table of Contents #

Create a Deep Copy of an Array in TypeScript #

Create a Deep Copy of an Array using Lodash #

Borislav Hadzhiev