How to push an object into an array in Typescript

In this typescript tutorial, we will see how to push an object into an array in typescript using different methods.

Below are the 3 methods to push an object into an array in Typescript:

• Using Push ()
• Using the spread operator
• Using the concat() method

Push an object into an array in Typescript using Push ()

Here we will see how we can use push() in typescript, to push an object into an array.

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

Syntax:

array.push(item1, ..., itemN);

For example, we created an interface of the employee object, with the name and age property name of type string and number respectively. Then we create a person array.

After that, we will create a new, employee object with the name Alex, and the age is 35. By using push(), we will push the employee object, into a people array.

Open the code editor and create a file named as ‘pushObjectIntoArray.ts’ file, then write the below code:

interface Employee {
    name: string;
    age: number;
  }
  
  const people: Employee[] = [];
  
  const employee: Employee = {
    name: "Alex",
    age: 35
  };
  
  people.push(person);
  
  console.log(people);

To compile the code and run the below command, you can see the result in the console.

ts-node pushObjectIntoArray.ts

This is an example of pushing an object into an array using Push() in typescript.

Push an object into an array in Typescript using spread operator

Here we will see how we can use the spread operator in typescript, to push an object into an array.

The spread operator (…) in typescript is used to copy all the elements or objects from an array into another array.

For example, we created an interface of the employee object, with the name and age property name of type string and number respectively. Then we create a person array.

After that, we will create a new, employee object with the name Alex, and the age is 35. Using the spread operator, we will add all the employee objects, into a people array.

In the ‘pushObjectIntoArray.ts’ file write the below code:

  interface Employee {
    name: string;
    age: number;
  }
  
  var people: Employee[] = [];
  
  const employee: Employee = {
    name: "John",
    age: 30
  };
  
  people = [...people, person];
  
  console.log(people);

To compile the code run the below command and you can see the result in the console

ts-node 'pushObjectIntoArray.ts'

This is an example of pushing an object into an array using the spread operator in typescript.

Push an object into an array in Typescript using concat() method

Here we will see how we can use concat() in typescript, to push an object into an array.

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

For example, we created an interface of the employee object, with the name and age property name of type string and number respectively. Then we create a person array.

After that, we will create a new, employee object with the name Alex, and the age is 35. Using the concat(), we will create a new array that contains all the items of the people array as well as the employee object.

In the ‘pushObjectIntoArray.ts’ file write the below code:

interface Employee {
    name: string;
    age: number;
  }
  
  var people: Employee[] = [];
  
  const employee: Employee = {
    name: "Alex",
    age: 35
  };
  
  people = people.concat(person);
  
  console.log(people);

To compile the code and run the below command, you can see the result in the console.

ts-node 'pushObjectIntoArray.ts

This is an example of pushing an object into an array using Concat() in typescript.

Conclusion

In this typescript tutorial, we saw how to push an object into a typescript array by using different methods. These methods are:

• Using Push ()
• Using the spread operator
• Using the concat() method

You may like the following typescript tutorials:

• How to Get Key by Value from enum String in Typescript
• How to get string between 2 characters in Typescript
• convert string to double in typescript
• How to get string after character in Typescript
• Typescript string enum reverse mapping
• How to compare strings for sorting in typescript