In this tutorial, I will explain how to append elements to an array in TypeScript. TypeScript provides several methods to manipulate arrays effectively. I will show you different techniques to add elements to an array, including the push()
method, the spread operator, etc. You will learn how to append elements to TypeScript arrays with practical examples here.
Append Elements to an Array in TypeScript
An array is an ordered collection of elements that can be of any data type, such as numbers, strings, objects, or even other arrays. In TypeScript, arrays are declared using square brackets []
and can be initialized with values or left empty.
Here’s an example of declaring an array of strings in TypeScript:
const usStates: string[] = ['California', 'Texas', 'Florida', 'New York'];
Check out How to Initialize an Array in TypeScript?
Append Elements to an Array using push()
The most common way to append elements to an array in TypeScript is by using the push()
method. The push()
method adds one or more elements to the end of an array and returns the new length of the array.
Here’s an example that demonstrates how to use push()
to append elements to an array:
const usCities: string[] = ['Los Angeles', 'Houston', 'Chicago'];
console.log(usCities); // Output: ['Los Angeles', 'Houston', 'Chicago']
usCities.push('Philadelphia');
console.log(usCities); // Output: ['Los Angeles', 'Houston', 'Chicago', 'Philadelphia']
usCities.push('Phoenix', 'San Antonio');
console.log(usCities); // Output: ['Los Angeles', 'Houston', 'Chicago', 'Philadelphia', 'Phoenix', 'San Antonio']
In the above example, we start with an array usCities
containing three elements. We then use the push()
method to append the city ‘Philadelphia’ to the end of the array. Finally, we use push()
again to append two more cities, ‘Phoenix’ and ‘San Antonio’, in a single call.
I executed the above TypeScript code using VS code, and you can see the exact output in the screenshot below:

Check out Check if a TypeScript Array Contains a Specific Value
Append an Array to Another Array in TypeScript
If you have an array that you want to append to another array, you can use the spread operator (...
) in combination with push()
. The spread operator allows you to spread the elements of an array into another array.
Here’s an example:
const eastCoastCities: string[] = ['New York', 'Boston', 'Washington D.C.'];
const westCoastCities: string[] = ['San Francisco', 'Seattle', 'San Diego'];
eastCoastCities.push(...westCoastCities);
console.log(eastCoastCities); // Output: ['New York', 'Boston', 'Washington D.C.', 'San Francisco', 'Seattle', 'San Diego']
In this example, we have two arrays: eastCoastCities
and westCoastCities
. We use the spread operator ...
to spread the elements of westCoastCities
and pass them as individual arguments to the push()
method of eastCoastCities
. As a result, all the elements of westCoastCities
are appended to the end of eastCoastCities
.
Using the Spread Operator to Create a New Array
While push()
modifies the original array, sometimes you may want to create a new array with the appended elements without modifying the original array. In such cases, you can use the spread operator to create a new array that includes the elements of the original array and the new elements.
Here’s an example:
const usPoliticians: string[] = ['Joe Biden', 'Kamala Harris', 'Nancy Pelosi'];
const newPoliticians: string[] = [...usPoliticians, 'Chuck Schumer', 'Kevin McCarthy'];
console.log(usPoliticians); // Output: ['Joe Biden', 'Kamala Harris', 'Nancy Pelosi']
console.log(newPoliticians); // Output: ['Joe Biden', 'Kamala Harris', 'Nancy Pelosi', 'Chuck Schumer', 'Kevin McCarthy']
In this example, we have an array usPoliticians
with three elements. We create a new array newPoliticians
using the spread operator ...
to include all the elements of usPoliticians
and then append two new elements, ‘Chuck Schumer’ and ‘Kevin McCarthy’. The original usPoliticians
array remains unchanged, and the new array newPoliticians
contains all the elements.
Check out How to Check if an Array is Not Empty in TypeScript?
Appending Objects to an Array
In TypeScript, you can also append objects to an array. When appending objects, it’s important to define the structure of the object to ensure type safety.
Here’s an example that demonstrates appending objects to an array:
interface Person {
name: string;
age: number;
}
const people: Person[] = [
{ name: 'John Smith', age: 35 },
{ name: 'Sarah Johnson', age: 28 },
];
const newPerson: Person = { name: 'Michael Davis', age: 42 };
people.push(newPerson);
console.log(people);
// Output: [
// { name: 'John Smith', age: 35 },
// { name: 'Sarah Johnson', age: 28 },
// { name: 'Michael Davis', age: 42 }
// ]
In this example, we define an interface Person
that specifies the structure of the objects we want to store in the array. We create an array people
with two initial objects. We then create a new object newPerson
that adheres to the Person
interface and append it to the people
array using push()
.
Conclusion
In this tutorial, I explained various methods to append elements to an array in TypeScript. The push()
method is the best way to append elements to the end of an array. You can also use the spread operator ...
to append arrays or create new arrays with the appended elements. Do let me know in the comments below if it helps.
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.