Updated August 4, 2023
Introduction to TypeScript Array of Objects
TypeScript Array of Objects lets the user store multiple values in a single variable simultaneously. An array of Objects helps store a fixed-size sequential collection of elements of the same type. TypeScript Arrays are a data type just like a string, Boolean, and number; we know there are many ways to declare the arrays in TypeScript. One 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’s 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 cleaner, 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, the majority of its parts can be used interchangeably.
- Inline Types can function 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 implement.
- In the same context, the user cannot declare an interface extending a union type. An interface prototype 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 less flexible with union types or advanced inline types.
- By default, the Inline Type declaration of Array of Objects comes into use in TypeScript.
Examples of TypeScript Array of Objects
Let’s see how these objects work 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 can 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 in 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 returns Undefined.
Conclusion
We have understood what TypeScript Array of Objects is and how it is used in TypeScript. We described the Syntax of declaring the Array of Objects using two ways i.e., Inline Typed and Named Interfaces. Both syntaxes almost look similar and return the same output. We have also checked out some rules on applying the Type when declaring the Array of Objects.
Recommended Articles
Here are some further related articles for expanding understanding:
