TypeScript Array of Objects

Introduction to TypeScript Array of Objects

TypeScript Array of Objects lets the user store multiple values in a single variable at once. Array of Objects is used to store a fixed-size sequential collection of elements of the same type. TypeScript Arrays are themselves a data type just as a string, Boolean, and number, we know that there are a lot of ways to declare the arrays in TypeScript. One of which is Array of Objects, in TypeScript, the user can define an array of objects by placing brackets after the interface. It can be named interface or an inline interface. Let us, deep-dive, into the Syntax description for declaring Array of Objects in TypeScript and explore a few examples.

Syntax:

Here is the syntax for declaring an array of objects using an Inline Type.

const sample_arr: {
data1: <data type>;
data2: <data type>;
data3: <data type>;
}[ ] = [
{ data1: “value1”, data2: “value2”, data3: “value3” },
{ data1: “value12”, data2: “value22”, data3: “value32” },
{ data1: “value13”, data2: “value23”, data3: “value33” },
];

The syntax for declaring an array of objects in TypeScript using a Named Interface.

interface sample_arr {
data1: <data type>;
data2: <data type>;
data3: <data type>;
}
const array_emp: sample_arr[ ] = [
{ data1: “value1”, data2: “value2”, data3: “value3” },
{ data1: “value12”, data2: “value22”, data3: “value32” },
{ data1: “value13”, data2: “value23”, data3: “value33” },
]

So here we are using a named interface. NOTE: User can reuse Named Interfaces, sample_arr as mentioned above. It looks much easier and clean as this Interface can be imported or exported to other files where users can make reference to the same data structure.

Rules and Regulations for Implementing

• TypeScript Array of Objects, most part of it can be used interchangeably
• Inline Types can be used in aliasing much more complicated types and Interfaces are much inclined to basic type structure such as an object or a class, etc.
• User cannot use keyword implements on an inline type of union between the multiple types as the class does not know which are the methods or values to be implemented.
• In the same context, the user cannot declare an interface extending a union type. As a prototype of an interface needs to be specified on a declaration and not at the time of usage.
• TypeScript can merge declarations of an interface which have the same name.
• Interfaces have the advantage of merging multiple declarations with the same name but are a bit less flexible with union types or advanced inline types.
• By default, Inline Type declaration of Array of Objects is used in TypeScript.

Examples

Let us see how does Array of Objects work in TypeScript with few examples.

Example #1: Basic Example of Declaring an Array of Objects in Inline Type

let employee: { emp_id: number, emp_name: string, emp_desg: string }[] = [
{ "emp_id": 0, "emp_name": "Saideep", "emp_desg": "Tech Lead" },
{ "emp_id": 1, "emp_name": "Karthik", "emp_desg": "Manager" },
{ "emp_id": 2, "emp_name": "Kiran", "emp_desg": "Senior Systems Engineer" },
{ "emp_id": 3, "emp_name": "Revanth", "emp_desg": "Technology Analyst" },
{ "emp_id": 4, "emp_name": "Ravi", "emp_desg": "Systems Engineer" },
];
console.log('Employee ' + employee[0].emp_name + ' with ID ' + employee[0].emp_id + ' works as a ' + employee[0].emp_desg);
console.log('Employee ' + employee[1].emp_name + ' with ID ' + employee[1].emp_id + ' works as a ' + employee[1].emp_desg);
console.log('Employee ' + employee[2].emp_name + ' with ID ' + employee[2].emp_id + ' works as a ' + employee[2].emp_desg);
console.log('Employee ' + employee[3].emp_name + ' with ID ' + employee[3].emp_id + ' works as a ' + employee[3].emp_desg);
console.log('Employee ' + employee[4].emp_name + ' with ID ' + employee[4].emp_id + ' works as a ' + employee[4].emp_desg);

Output:

So we are able to access the employee details with the help of an index marked as emp_id here.

Example #2: Basic example of Array of Objects using Named Interface

interface Bike {
bike_model: string;
bike_price: number;
bike_mileage: string;
bike_RC: number;
}
let bike1: Bike = {
bike_model: "R15 X",
bike_price: 150000,
bike_mileage: "25km per litre",
bike_RC: 4367209012
}
let bike2: Bike = {
bike_model: "RS 200",
bike_price: 175000,
bike_mileage: "24 km per litre",
bike_RC: 436720666
}
let bike3: Bike = {
bike_model: "Hero RX",
bike_price: 50000,
bike_mileage: "18 km per litre",
bike_RC: 436229012
}
let bike: Bike[] = [];
bike.push(bike1);
bike.push(bike2);
bike.push(bike3);
console.log('Here are the Bike details', bike);

Output:

We are using the Named Interface method is declaring the Array of Objects.

Example #3: Array of Objects with an Undefined Array

interface Student {
stu_name: string;
stu_class: string;
stu_age: number;
}
let student: Student[];
console.log(student);

Output:

So here we are trying to print the object student which does not consist of an array of objects and hence returns Undefined.

Conclusion

With this, we conclude the topic ‘TypeScript Array of Objects’. We have seen what TypeScript Array of Objects mean and how is it used in TypeScript. Described the Syntax of declaring the Array of Objects using two ways i.e. Inline Typed and Named Interfaces. Both the syntax almost look similar and return the same output. We have also checked out some rules on applying the Type of declaring the Array of Objects. Illustrated a few examples above, one with Inline typed and one with Named Interface.

Recommended Articles

This is a guide to TypeScript Array of Objects. Here we discuss Introduction, syntax, Rules, and Regulations for implementing Array of Objects in TypeScript? You may also have a look at the following articles to learn more –

1. TypeScript Nullable
2. TypeScript Abstract Class
3. TypeScript Question Mark
4. TypeScript Decorators