Create a Deep Copy of an Array and preserve its type in TS

# 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);

create deep copy of array in typescript

The code for this article is available on GitHub

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 the 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 it's 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 remains unchanged.

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

# Create a Deep Copy of an Array using Lodash

Alternatively, you can use the clonedeep method from the lodash module.

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 can 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);

create deep copy of array 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 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

I've also written an article on how to get the type of the array elements from an array type.

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.

Create a Deep Copy of an Array and preserve its type in TS

# Table of Contents

# Create a Deep Copy of an Array in TypeScript

# Create a Deep Copy of an Array using Lodash

Borislav Hadzhiev