How to add Elements to an Array in TypeScript

avatar

Borislav Hadzhiev

Last updated: Feb 27, 2022

banner

Check out my new book

Table of Contents #

  1. Add Elements to an Array in TypeScript
  2. Add Element to the beginning of an Array in TypeScript
  3. Merging Arrays in TypeScript
  4. Add one or more elements to Array at Index in TypeScript

Add Elements to an Array in TypeScript #

To add an element to an array in TypeScript:

  1. Type the array correctly, e.g. const arr: number[] = [].
  2. Call the push() method on the array, e.g. arr.push(myValue).
  3. The push method adds one or more elements to the end of an array.
index.ts
const arr: number[] = []; // ✅ Add to end of array arr.push(2); // ✅ Add to beginning of array arr.unshift(1); console.log(arr); // 👉️ [1, 2] // ✅ Merge arrays const result = arr.concat([3, 4]); console.log(result); // 👉️ [1, 2, 3, 4] // ✅ Merge arrays with spread (...) const merged = [...arr, ...[3, 4]]; console.log(merged); // 👉️ [1, 2, 3, 4] // ✅ Add one or more elements at specific index const arr2: string[] = ['a', 'd', 'e']; arr2.splice(1, 0, 'b', 'c'); // 👇️ ['a', 'b', 'c', 'd', 'e'] console.log(arr2);

The first example shows how to add an element to the end of a TypeScript array by using the Array.push method.

The push method takes one or more values and adds them to the end of the array.

index.ts
const arr: number[] = []; arr.push(1, 2, 3); console.log(arr); // 👉️ [1, 2, 3]
Note that in order to be able to add an element to an array in TypeScript, the array and the element have to have compatible types.

When you declare an array with values, TypeScript is able to infer the type of the array.

index.ts
// 👇️ const arr: number[] const arr = [1, 2, 3];

TypeScript is able to infer the type of the array to be number[]. This means that the array only contains elements of type number and you can only add number elements to the array.

If you declare an empty array and don't explicitly type it, TypeScript doesn't know what type of elements the array will contain, so it gives it a type of any[].

index.ts
// 👇️ const arr: any[] const arr = [];

This means that you can add elements of any type to the array.

This behavior should be avoided because it disables type checking.

Always make sure to explicitly type empty arrays to a type that is compatible with the type of the elements you will be adding to the array.

In the unlikely scenario that you have a mixed array, e.g. of numbers and strings, use a union type when typing the array.

index.ts
const arr: (number | string)[] = [1, 'a']; arr.push(2, 'b'); console.log(arr); // 👉️ [1, 'a', 2, 'b']

And here is an example of how you would type an array of objects.

index.ts
const arr: { name: string; age: number }[] = []; arr.push({ name: 'Tom', age: 30 }); console.log(arr); // 👉️ [{name: 'Tom', age: 30}]
If you don't know how to type a specific value, declare a variable containing the value and hover over it. TypeScript will infer its type and tell you how the variable should be typed.

If you need to add or change an array element at a specific index, use bracket notation.

index.ts
const arr: string[] = ['hello']; arr[1] = 'world'; console.log(arr); // 👉️ ['hello', 'world']

If the array element at the specified index doesn't exist, an element is added to the array, otherwise the value of the element at the specific index is updated.

Add Element to the beginning of an Array in TypeScript #

To add an element to the beginning of an array in TypeScript:

  1. Type the array correctly, e.g. const arr: number[] = [].
  2. Call the unshift() method on the array, e.g. arr.unshift(myValue).
  3. The unshift method adds one or more elements to the beginning of an array.
index.ts
const arr: number[] = [3, 4]; arr.unshift(1, 2); console.log(arr); // 👉️ [1, 2, 3, 4]

The Array.unshift method does the opposite of the push() method.

Instead of adding one or more elements to the end, it adds them to the beginning of the array.

Merging Arrays in TypeScript #

Another common way to add elements to an array is to merge multiple arrays.

Use the spread syntax (...) to merge two arrays in TypeScript, e.g. const merged = [...[1, 2], ...[3, 4]];. The spread syntax (...) unpacks the values of the arrays into a new array and preserves the order of the elements.

index.ts
// ✅ Merge arrays with spread (...) const merged = [...[1, 2], ...[3, 4]]; console.log(merged); // 👉️ [1, 2, 3, 4]

We unpacked 2 arrays into a third array by using the spread syntax (...).

When using the spread syntax (...), the order in which you unpack the arrays is preserved.

index.ts
const merged = [...[3, 4], ...[1, 2]]; console.log(merged); // 👉️ [3, 4, 1, 2]

You might also see the concat method used to merge two or more arrays.

index.ts
const result = [1, 2].concat([3, 4], [5, 6]); console.log(result); // 👉️ [1, 2, 3, 4, 5, 6]

In my experience, the Array.concat method is not as commonly used as the spread syntax (...).

Add one or more elements to Array at Index in TypeScript #

Use the splice() method to add one or more elements to an array at a specific index, e.g. arr.splice(1, 0, 'b', 'c'). The splice method changes the contents of the original array by removing, replacing or adding new elements to the array.

index.ts
const arr: string[] = ['a', 'd', 'e']; arr.splice(1, 0, 'b', 'c'); // 👇️ ['a', 'b', 'c', 'd', 'e'] console.log(arr);

We pass the following parameters to the splice method:

  1. start index - the index at which to start changing the array
  2. delete count - how many elements we want to delete from the array, from the start index onwards
  3. one or more values to add to the array, from the start index onwards

We don't want to delete any elements, we pass 0 as the delete count.

The code snippet above:

  1. Starts changing the array at index 1
  2. Removes 0 elements from the array
  3. Adds the strings b and c to the array
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.