Introduction to TypeScript Array of Objects
TypeScript Array of Objects lets the user store multiple values in a single variable at once. An 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 like a string, Boolean, and number; we know that there are a lot of ways to declare the arrays in TypeScript. One of which is the Array of Objects in TypeScript; the user can define an array of objects by placing brackets after the interface. It can be named an interface or an inline interface. Let us deep-dive into the Syntax description for declaring an 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
- In 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 structures such as an object or a class, etc.
- Users cannot use keyword implements on an inline type of union between the multiple types as the class does not know which methods or values to be implemented.
- In the same context, the user cannot declare an interface extending a union type. 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 that 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, the Inline Type declaration of Array of Objects is used in TypeScript.
Examples
Let us see how an Array of Objects works in TypeScript with a 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 an Array of Objects using a 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. We have seen what TypeScript Array of Objects means and how it is 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
We hope that this EDUCBA information on “TypeScript Array of Objects” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
