How to Append to Arrays in TypeScript (5 Simple Methods)

Are you trying to append elements to arrays in TypeScript? TypeScript provides several ways to append items to arrays while maintaining type safety. In this article, I’ll walk you through the most effective methods to append elements to arrays in TypeScript with practical examples and best practices that I’ve learned during my years of TypeScript development.

Method 1 – Using the push() Method

The most straightforward way to append elements to an array in TypeScript is using the built-in push() method. This method adds one or more elements to the end of an array and returns the new length.

// Define a typed array
let usStates: string[] = ['California', 'Texas', 'Florida'];

// Append a single element
usStates.push('New York');
console.log(usStates); // ['California', 'Texas', 'Florida', 'New York']

// Append multiple elements at once
usStates.push('Illinois', 'Pennsylvania', 'Ohio');
console.log(usStates); 
// ['California', 'Texas', 'Florida', 'New York', 'Illinois', 'Pennsylvania', 'Ohio']

Here is the exact output in the screenshot below:

The push() method is great because TypeScript will enforce type checking. If you try to push an element of the wrong type, TypeScript will throw an error:

let usPopulation: number[] = [39.5, 29.1, 21.8]; // Population in millions
usPopulation.push(19.8); // Works fine
// usPopulation.push('Washington'); // Error: Argument of type 'string' is not assignable to parameter of type 'number'

Check out How to Remove Items from Arrays in TypeScript

Method 2 – Using the Spread Operator

Another elegant way to append elements to arrays in TypeScript is using the spread operator (...). This creates a new array rather than modifying the existing one, which is great for maintaining immutability.

let usPresidents: string[] = ['Washington', 'Adams', 'Jefferson'];

// Append a single element
let updatedPresidents = [...usPresidents, 'Madison'];
console.log(updatedPresidents); // ['Washington', 'Adams', 'Jefferson', 'Madison']

// Append multiple elements
let morePresidents = [...updatedPresidents, 'Monroe', 'Adams', 'Jackson'];
console.log(morePresidents);
// ['Washington', 'Adams', 'Jefferson', 'Madison', 'Monroe', 'Adams', 'Jackson']

This approach is particularly useful in React applications or when working with state management libraries like Redux, where immutability is important.

Check out Add to an Array in TypeScript Only If the Value Exists

Method 3 – Using the concat() Method

The concat() method is another immutable way to append elements to an array in TypeScript. It creates a new array by merging existing arrays and/or values.

let usTechCompanies: string[] = ['Apple', 'Microsoft', 'Amazon'];

// Append a single element
let updatedCompanies = usTechCompanies.concat('Google');
console.log(updatedCompanies); // ['Apple', 'Microsoft', 'Amazon', 'Google']

// Append multiple elements
let moreCompanies = updatedCompanies.concat('Facebook', 'Netflix');
console.log(moreCompanies); // ['Apple', 'Microsoft', 'Amazon', 'Google', 'Facebook', 'Netflix']

// Append another array
let additionalCompanies = ['Tesla', 'IBM'];
let allCompanies = moreCompanies.concat(additionalCompanies);
console.log(allCompanies);
// ['Apple', 'Microsoft', 'Amazon', 'Google', 'Facebook', 'Netflix', 'Tesla', 'IBM']

You can see the exact output in the screenshot below:

Read Push Objects into an Array in TypeScript

Method 4 – Using Array Destructuring

Array destructuring provides another way to append elements to a TypeScript array, especially when working with function parameters or returns:

function addUsState(states: string[], newState: string): string[] {
  return [...states, newState];
}

let usWestCoastStates: string[] = ['California', 'Oregon'];
usWestCoastStates = addUsState(usWestCoastStates, 'Washington');
console.log(usWestCoastStates); // ['California', 'Oregon', 'Washington']

// Can also be done directly:
let usEastCoastStates: string[] = ['New York', 'Massachusetts'];
let updatedEastCoastStates = ((states, newState) => [...states, newState])(usEastCoastStates, 'Florida');
console.log(updatedEastCoastStates); // ['New York', 'Massachusetts', 'Florida']

Read How to Use Array.find() in TypeScript?

Method 5 – Working with Typed Arrays and Complex Objects

When working with more complex types, TypeScript’s type system helps ensure you’re appending the correct data:

// Define an interface for a U.S. state
interface USState {
  name: string;
  capital: string;
  population: number;
}

// Initialize an array of USState objects
let states: USState[] = [
  { name: 'California', capital: 'Sacramento', population: 39.5 },
  { name: 'Texas', capital: 'Austin', population: 29.1 }
];

// Append a new state
states.push({ name: 'New York', capital: 'Albany', population: 19.8 });

// Using spread operator with complex objects
let moreStates: USState[] = [
  ...states,
  { name: 'Florida', capital: 'Tallahassee', population: 21.5 }
];

console.log(moreStates.length); // 4

You can also append to generic arrays with constraints:

function appendToArray<T>(array: T[], ...items: T[]): T[] {
  return [...array, ...items];
}

let numbers = appendToArray<number>([1, 2, 3], 4, 5);
console.log(numbers); // [1, 2, 3, 4, 5]

let cities = appendToArray<string>(['New York', 'Los Angeles'], 'Chicago', 'Houston');
console.log(cities); // ['New York', 'Los Angeles', 'Chicago', 'Houston']

Check out Get Distinct Values from an Array in TypeScript

Performance Considerations

When deciding which method to use, consider the performance implications:

1. push() is typically the most efficient for adding single elements as it modifies the array in place.
2. Spread operator and concat() create new arrays, which is less efficient for large arrays but maintains immutability.
3. For frequent additions to large arrays, consider using specialized data structures or optimizing with Array.prototype.length.

// Performance optimization for multiple pushes
let largeArray: number[] = new Array(1000).fill(0);
let newLength = largeArray.length + 3;
largeArray.length = newLength;
largeArray[newLength - 3] = 1;
largeArray[newLength - 2] = 2;
largeArray[newLength - 1] = 3;

I hope you found this article helpful! Here, I explained how to append to arrays in TypeScript using various methods. I will suggest using the Push() method to append elements to TypeScript arrays.

If you have any questions or need more examples about working with arrays in TypeScript, feel free to leave a comment below.

You may also like the following tutorials:

• Filter An Array with Multiple Conditions in TypeScript
• Filter Empty Strings from an Array in TypeScript
• Filter Duplicates from an Array in TypeScript
• Remove Null Values from an Array in TypeScript