EDUCBA

EDUCBA

MENUMENU
  • Blog
  • Free Courses
  • All Courses
  • All in One Bundle
  • Login
Home Software Development Software Development Tutorials TypeScript Tutorial TypeScript Array of Objects

TypeScript Array of Objects

By Asapu HarikaAsapu Harika

TypeScript Array of Objects

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:

TypeScript Array of Objects 1

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:

TypeScript Array of Objects 2

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:

TypeScript Array of Objects 3

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:

  1. TypeScript Nullable
  2. Abstract Class in Typescript
  3. TypeScript Question Mark
  4. TypeScript Decorators
All in One Excel VBA Bundle
500+ Hours of HD Videos
15 Learning Paths
120+ Courses
Verifiable Certificate of Completion
Lifetime Access
Financial Analyst Masters Training Program
1000+ Hours of HD Videos
43 Learning Paths
250+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Data Science Bundle
1500+ Hour of HD Videos
80 Learning Paths
360+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Software Development Bundle
3000+ Hours of HD Videos
149 Learning Paths
600+ Courses
Verifiable Certificate of Completion
Lifetime Access
Primary Sidebar
Popular Course in this category
C# DEVELOPER Certification Course
 110+ Hours of HD Videos
24 Courses
5 Mock Tests & Quizzes
  Verifiable Certificate of Completion
  Lifetime Access
4.6
Price

View Course
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more