How to Push Objects into an Array in TypeScript?

While working with TypeScript arrays, you should know how to add objects to arrays in TypeScript. In this article, I’ll explain multiple ways to add objects to arrays in TypeScript, highlighting best practices I’ve learned from real-world projects. So, let’s dive in!

TypeScript arrays are strongly typed, meaning they can be restricted to contain specific types of elements. This provides compile-time type checking, which helps catch errors before your code runs.

Here are the different methods to push objects into an array in TypeScript.

Method 1: Using the push() Method

The most common way to add objects to an array is by using the built-in push() method in TypeScript.

The push method in TypeScript is used to push an object or element in the rear/last of an array.

Let’s see how this works with TypeScript:

// Define an interface for our object structure
interface Employee {
  id: number;
  name: string;
  department: string;
}

// Create an array of Employee objects
const employees: Employee[] = [];

// Add a new employee to the array
employees.push({
  id: 1,
  name: 'John Doe',
  department: 'Marketing'
});

// Add another employee
employees.push({
  id: 2,
  name: 'Jane Smith',
  department: 'Engineering'
});

console.log(employees); // Will show an array with both employees

You can see the exact output in the screenshot below:

The beauty of TypeScript here is that it will throw a compilation error if you try to push an object that doesn’t match the Employee interface:

// This will cause a TypeScript error
employees.push({
  id: 3,
  name: 'Bob Johnson'
  // Error: Property 'department' is missing
});

Check out Sort Arrays of Objects in TypeScript

Method 2: Spread Operator for Immutability

If you’re working with React or other libraries that prefer immutability, the spread operator is your friend. The spread operator (…) in TypeScript is used to copy all the elements or objects from an array into another array.

Here is an example.

interface Task {
  id: number;
  title: string;
  completed: boolean;
}

let tasks: Task[] = [
  { id: 1, title: 'Complete report', completed: false }
];

// Create a new array with the existing tasks plus a new one
tasks = [
  ...tasks,
  { id: 2, title: 'Call client', completed: false }
];

console.log(tasks); // Array with both tasks

This approach creates a new array instead of modifying the existing one, which is perfect for state management in frameworks like React.

You can see the exact output in the screenshot below:

Check out Array.find() in TypeScript

Method 3: Using concat() Method

The concat() method is another immutable way to add objects to arrays in TypeScript.

The contact method in TypeScript is used to combine one or two arrays and returns a new array.

Here is an example and the complete code.

interface Product {
  id: number;
  name: string;
  price: number;
}

const products: Product[] = [
  { id: 101, name: 'Laptop', price: 1299.99 }
];

// Create a new array by concatenating the existing array with a new object
const updatedProducts = products.concat({
  id: 102, 
  name: 'Smartphone', 
  price: 899.99
});

console.log(updatedProducts); // Array with both products
console.log(products); // Original array remains unchanged

Here is the exact output in the screenshot below:

Check out Convert TypeScript Enums to Arrays

Method 4: Adding Objects at Specific Positions

Sometimes, you need to insert an object at a specific position in a TypeScript array. For this, you can use the splice() method:

interface Contact {
  id: number;
  name: string;
  phone: string;
}

const contacts: Contact[] = [
  { id: 1, name: 'Alice Cooper', phone: '212-555-1234' },
  { id: 3, name: 'Charlie Brown', phone: '415-555-6789' }
];

// Insert a contact at index 1 (between Alice and Charlie)
contacts.splice(1, 0, {
  id: 2, 
  name: 'Bob Dylan', 
  phone: '310-555-4567'
});

console.log(contacts); // Alice, Bob, Charlie in order

Check out Get Distinct Values from an Array in TypeScript

Method 5: Type Guards for Mixed Arrays

In some cases, you might need an array that holds different types of objects. TypeScript’s union types make this possible:

interface Customer {
  id: number;
  name: string;
  type: 'customer';
  loyaltyPoints: number;
}

interface Employee {
  id: number;
  name: string;
  type: 'employee';
  department: string;
}

// Array that can contain both types
const people: (Customer | Employee)[] = [];

// Add a customer
people.push({
  id: 1,
  name: 'Sarah Connor',
  type: 'customer',
  loyaltyPoints: 250
});

// Add an employee
people.push({
  id: 2,
  name: 'Kyle Reese',
  type: 'employee',
  department: 'Security'
});

// Working with mixed types (using type guards)
people.forEach(person => {
  console.log(person.name); // Common property, no problem

  if (person.type === 'customer') {
    // TypeScript now knows this is a Customer
    console.log(`Loyalty points: ${person.loyaltyPoints}`);
  } else {
    // TypeScript knows this is an Employee
    console.log(`Department: ${person.department}`);
  }
});

In this tutorial, I have explained how to push an object into an array in TypeScript using several methods.

You may also like:

• Filter An Array with Multiple Conditions in TypeScript
• Filter Empty Strings from an Array in TypeScript