How to add Elements to an Array in TypeScript

# Table of Contents

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

# Add Elements to the end of an Array in TypeScript

To add an element to the end of 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.

Copied!
const arr: number[] = [];

arr.push(1);
arr.push(2);
arr.push(3);

// 👇️ [ 1, 2, 3 ]
console.log(arr);

The Array.push() method adds one or more values to the end of an array.

You can use the push() method to add multiple values to the end of an array in a single statement.

Copied!
const arr: number[] = [];

arr.push(1, 2, 3);

console.log(arr); // 👉️ [1, 2, 3]

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

Copied!
// 👇️ const arr: number[]
const arr = [1, 2, 3];

TypeScript is able to infer the type of the array to be number[].

Therefore the array only contains elements of type number and only number elements can be added to the array.

# Adding elements to an array of any type

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

Copied!
// const arr: any[]
const arr = [];

arr.push('bobby');
arr.push(5);
arr.push(true);

console.log(arr); // 👉️ [ 'bobby', 5, true ]

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

The any type basically disables type checking in TypeScript.

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

Here is an example of how you would type an array of objects.

Copied!
const arr: { name: string; age: number }[] = [];

arr.push({ name: 'Bobby Hadz', age: 30 });

console.log(arr); // 👉️ [{name: 'Bobby Hadz', age: 30}]

# Add Element to the beginning of an Array in TypeScript

To add an element to the beginning of an array:

1. Type the array correctly, e.g. const arr: number[] = [].
2. Call the unshift() method on the array, e.g. arr.unshift(myValue).

Copied!
const arr: string[] = ['hadz', 'com'];

arr.unshift('bobby');

console.log(arr); // 👉️ [ 'bobby', 'hadz', 'com' ]

The Array.unshift() method adds one or more elements to the beginning of an array.

The method can also be called with multiple, comma-separated arguments.

Copied!
const arr: number[] = [3];

arr.unshift(1, 2);

console.log(arr); // 👉️ [ 1, 2, 3 ]

# Merging Arrays in TypeScript

Use the spread syntax (...) if you need to merge two arrays.

Copied!
const arr1: number[] = [1, 2];
const arr2: number[] = [3, 4];

const arr3: number[] = [...arr1, ...arr2];

// 👇️ [ 1, 2, 3, 4 ]
console.log(arr3);

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.

Copied!
const merged: number[] = [...[3, 4], ...[1, 2]];
console.log(merged); // 👉️ [3, 4, 1, 2]

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

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

I've written a detailed guide on how to merge arrays in TypeScript.

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

The splice method changes the contents of the original array by removing, replacing or adding new elements to the array.

Copied!
const arr: string[] = ['a', 'd', 'e'];

arr.splice(1, 0, 'b', 'c');

// 👇️ ['a', 'b', 'c', 'd', 'e']
console.log(arr);

We passed the following arguments to the Array.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 sample 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

If you need to remove elements from an array, click on the link and follow the instructions.

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