As a TypeScript developer, you should know how to add elements to an array. In this tutorial, I will explain how to add elements to an array in TypeScript using various methods with real-world examples.
Add Elements to an Array in TypeScript
Arrays are data structures in programming that allow you to store and manipulate collections of data. In TypeScript, arrays are particularly powerful due to the language’s strong typing and advanced features.
TypeScript enhances JavaScript by adding static types, which can help catch errors early and improve code quality. When working with arrays, TypeScript’s type system can ensure that you only add elements of the correct type, making your code more robust and maintainable.
Before explaining how to add elements, let me explain to you the basics of defining and initializing arrays in TypeScript.
let fruits: string[] = ["Apple", "Banana", "Cherry"];
In this example, fruits
is an array of strings. TypeScript ensures that only strings can be added to this array.
Now, let me explain to you various methods to add elements to an array in TypeScript.
Method 1: Using the push() Method
The push
method is the best way to add elements to an array in TypeScript. It appends one or more elements to the end of the array.
let cities: string[] = ["New York", "Los Angeles", "Chicago"];
cities.push("Houston");
console.log(cities); // Output: ["New York", "Los Angeles", "Chicago", "Houston"]
In this example, “Houston” is added to the end of the cities
array.
I executed the above TypeScript code, and you can see the exact output in the screenshot below:

Check out Check if a TypeScript Array Contains a Specific Value
Method 2: Using the unshift() Method
If you need to add elements to the beginning of an array in TypeScript, use the unshift
method. This method prepends elements to the array.
let states: string[] = ["California", "Texas", "Florida"];
states.unshift("New York");
console.log(states); // Output: ["New York", "California", "Texas", "Florida"]
Here, “New York” is added to the start of the states
array.
Method 3: Using the concat Method
The concat
method is useful when you want to merge arrays or add multiple elements without modifying the original array in TypeScript. It returns a new array.
let eastCoast: string[] = ["New York", "New Jersey"];
let westCoast: string[] = ["California", "Oregon"];
let allStates = eastCoast.concat(westCoast);
console.log(allStates); // Output: ["New York", "New Jersey", "California", "Oregon"]
In this example, eastCoast
and westCoast
are merged into a new array allStates
.
Here is the exact output in the screenshot below:

Method 4: Using the Spread Operator
The spread operator (...
) allows you to add elements to an array in TypeScript in a concise and readable way. It can be used to insert elements at any position.
let midwest: string[] = ["Illinois", "Ohio"];
let moreStates = ["Michigan", ...midwest, "Wisconsin"];
console.log(moreStates); // Output: ["Michigan", "Illinois", "Ohio", "Wisconsin"]
Here, the elements of midwest
are spread into moreStates
, with “Michigan” and “Wisconsin” added at the beginning and end, respectively.
Method 5: Using splice() for Inserting Elements
The splice
method can add elements at a specific index in the TypeScript array. It modifies the original array.
let techCompanies: string[] = ["Google", "Apple", "Amazon"];
techCompanies.splice(1, 0, "Microsoft");
console.log(techCompanies); // Output: ["Google", "Microsoft", "Apple", "Amazon"]
In this example, “Microsoft” is inserted at index 1, pushing “Apple” and “Amazon” to the right.
Check out Append Elements to an Array in TypeScript
Handle Complex Types
TypeScript’s type system shines when dealing with arrays of complex types, such as objects. Let’s say we have an array of user objects:
interface User {
name: string;
age: number;
city: string;
}
let users: User[] = [
{ name: "John Doe", age: 30, city: "New York" },
{ name: "Jane Smith", age: 25, city: "Los Angeles" }
];
// Adding a new user
users.push({ name: "Michael Johnson", age: 35, city: "Chicago" });
console.log(users);
TypeScript ensures that each object added to the users
array conforms to the User
interface.
Performance Considerations
When adding elements to arrays, consider the performance implications. Methods like push
and unshift
are generally fast, but splice
can be slower, especially for large arrays, as it may need to shift many elements.
Common Issues
Here are some common issues you might get while adding elements to a TypeScript array.
- Type Mismatch: Ensure that the elements you add match the array’s type. TypeScript will catch these errors at compile time.
let numbers: number[] = [1, 2, 3];
// numbers.push("four"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.
- Immutable Operations: If you need to maintain immutability, prefer methods that return new arrays, like
concat
and the spread operator.
Conclusion
In this tutorial, I explained how to add elements to an array in TypeScript using various methods. With examples, I explained the below methods:
- Using the push() Method
- Using the unshift() Method
- Using the concat Method
- Using the Spread Operator
- Using splice() for Inserting Elements
You may also like:
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.