How to create an array of objects in TypeScript?

In TypeScript, the array contains the data or different values and can also contain an object. The object contains the properties and methods in TypeScript. We can access the object properties and invoke the object method by taking the object as a reference.

In this tutorial, we will learn to create an array of multiple objects in TypeScript. We will also learn to perform some operations, such as sorting on the array of objects.

Syntax

Here, we have given the syntax to follow to create the array of objects.

let obj_array: Array<Object_Type> = [{object properties}]

In the above syntax, Object_Type is a type of object that defines which properties all objects of the array will contain with its data type.

Example

In this example, we have used the type alias to create a type of object. The objType contains the obj_id of the number type and the obj_value of the string type.

We have created the array of objType objects containing the five different objects with different property values. Also, we are accessing the object from the first index and reading its property values.

// Creating the type for the object
type objType = {
   obj_id: number;
   obj_value: string;
};
// creating the array of objects
let objArray: Array<objType> = [
   { obj_id: 1, obj_value: "TutorialsPoint" },
   { obj_id: 2, obj_value: "TypeScript" },
   { obj_id: 3, obj_value: "Shubham" },
   { obj_id: 4, obj_value: "TutorialsPoint" },
   { obj_id: 5, obj_value: "TypeScript" },
];
console.log(
   "The properties values of the object at the first index in objArray is "
);
// accessing the object and its properties
console.log(objArray[0].obj_id);
console.log(objArray[0].obj_value);

On compiling, it will generate the following JavaScript code −

// creating the array of objects
var objArray = [
   { obj_id: 1, obj_value: "TutorialsPoint" },
   { obj_id: 2, obj_value: "TypeScript" },
   { obj_id: 3, obj_value: "Shubham" },
   { obj_id: 4, obj_value: "TutorialsPoint" },
   { obj_id: 5, obj_value: "TypeScript" },
];
console.log("The properties values of the object at the first index in objArray is ");
// accessing the object and its properties
console.log(objArray[0].obj_id);
console.log(objArray[0].obj_value);

Output

The above code will produce the following output −

The properties values of the object at the first index in objArray is
1
TutorialsPoint

Iterate Through The Array of Objects

We can use the loops to iterate through the array of objects. While iterating through the array, we can access the particular object using the zero-base array index. After accessing the object from the array, we can also access the object properties.

Syntax

Users can follow the syntax below to iterate through the array of objects.

for (let obj of objArray) {
   obj.property
}

In the above syntax, we have used the for-of loop to iterate through the array of objects. We can access the property by taking the obj as a reference.

Example

In this example, we used the for-of loop to iterate through the objects containing objects with different property values. In the for loop, we get a single object name obj, which we can use to access its property values.

// creating the array of objects
let objArray = [
   { obj_id: 1, obj_value: "TutorialsPoint" },
   { obj_id: 2, obj_value: "TypeScript" },
   { obj_id: 3, obj_value: "Shubham" },
   { obj_id: 4, obj_value: "TutorialsPoint" },
   { obj_id: 5, obj_value: "TypeScript" },
];
console.log(
   "Iterating through the array of objects using the for-of loop and accessing its properties."
);
// using the for-of loop to iterate through the array of objects
for (let obj of objArray) {
   console.log("obj_id " + obj.obj_id + " obj_value " + obj.obj_value);
}

On compiling, it will generate the following JavaScript code:

// creating the array of objects
var objArray = [
    { obj_id: 1, obj_value: "TutorialsPoint" },
    { obj_id: 2, obj_value: "TypeScript" },
    { obj_id: 3, obj_value: "Shubham" },
    { obj_id: 4, obj_value: "TutorialsPoint" },
    { obj_id: 5, obj_value: "TypeScript" },
];
console.log("Iterating through the array of objects using the for-of loop and accessing its properties.");
// using the for-of loop to iterate through the array of objects
for (var _i = 0, objArray_1 = objArray; _i < objArray_1.length; _i++) {
    var obj = objArray_1[_i];
    console.log("obj_id " + obj.obj_id + " obj_value " + obj.obj_value);
}

Output

The above code will produce the following output −

Iterating through the array of objects using the for-of loop and accessing its properties.
obj_id 1 obj_value TutorialsPoint
obj_id 2 obj_value TypeScript
obj_id 3 obj_value Shubham
obj_id 4 obj_value TutorialsPoint
obj_id 5 obj_value TypeScript

Follow the below steps for next example

• Step 1 − Create a Tree interface that contains the id, tree_name, and age properties. Also, make the age property optional by using the question mark.

• Step 2 − Create the array named trees, which can contain the objects of type Tree.

• Step 3 − Initialize the array with some objects. In the below example, some objects contain age property, and some don’t, as it is optional

• Step 4 − Use the filter() method of the Array to filter all objects whose age is greater than 20.

• Step 5 − In the parameter of the filter method, pass the callback function, which takes a particular tree object as a parameter and returns the Boolean value based on whether the tree object contains the age property or not, and if it contains, then its value is greater than 20 or not.

• Step 6 − Print the filteredTrees array.

Example

In this example, we have implemented the above steps to create the array of Tree objects. Also, we have used the filter() method of the Array library to filter all objects whose age is above 20.

// Creating the interface for the Tree object
// age is the optional property
interface Tree {
   id: number;
   tree_name: string;
   age?: number;
}
// creating the array of trees
let Trees: Array<Tree> = [
   { id: 10, tree_name: "Palm tree" },
   { id: 15, tree_name: "Guava tree", age: 30 },
   { id: 20, tree_name: "Papita tree", age: 15 },
   { id: 25, tree_name: "Grass tree" },
   { id: 35, tree_name: "Neem tree", age: 21 },
];
// filtering all trees whose age is above 20 years
let filteredTrees: Array<Tree> = Trees.filter((tree) => {
   return tree.age ? tree.age > 20 : false;
});
console.log("The all trees whose age is above 20 are");
console.log(filteredTrees);

On compiling, it will generate the following JavaScript code −

// creating the array of trees
var Trees = [
   { id: 10, tree_name: "Palm tree" },
   { id: 15, tree_name: "Guava tree", age: 30 },
   { id: 20, tree_name: "Papita tree", age: 15 },
   { id: 25, tree_name: "Grass tree" },
   { id: 35, tree_name: "Neem tree", age: 21 },
];
// filtering all trees whose age is above 20 years
var filteredTrees = Trees.filter(function (tree) {
   return tree.age ? tree.age > 20 : false;
});
console.log("The all trees whose age is above 20 are");
console.log(filteredTrees);

Output

The above code will produce the following output −

All trees whose age is above 20 are

[ { id: 15, tree_name: 'Guava tree', age: 30 },
{ id: 35, tree_name: 'Neem tree', age: 21 } ]

Users learned to create an array of objects. Also, we learned to create objects with optional properties and add them to the array.

Furthermore, we learned to iterate through the objects array using the for-of loop, but users can also use the for or while loop. Also, we learned to use the filter() method with the array of objects, and in such a way, users can also use other methods like find()and sort(). We need to optimize the callback function according to the requirement.