EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials TypeScript Tutorial TypeScript Array of Objects
Secondary Sidebar
TypeScript Tutorial
  • TypeScript Array
    • TypeScript Array of Objects
    • Methods TypeScript Array
    • TypeScript remove item from array
    • TypeScript add to array
    • TypeScript Array Contains
  • TypeScript Basic and Advanced
    • What is TypeScript?
    • Typescript Examples
    • TypeScript Versions
    • TypeScript Operators
    • JavaScript dump object
    • JavaScript get Method
    • Webpack ReactJS
    • Code Generator JavaScript
    • JavaScript Projects
    • Call Stack JavaScript
    • JavaScript Projects GitHub
    • JavaScript Filter Function
    • JavaScript nan
    • JavaScripttimestamp
    • TypeScript loop
    • CoffeeScript
    • TypeScript Webpack
    • setTimeout TypeScript
    • DHTMLX
    • CoffeeScript for loop
    • TypeScript number
    • JavaScript export module
    • TypeScript string contains
    • TypeScript Inheritance
    • TypeScript get
    • TypeScript undefined
    • TypeScript Global Variable
    • TypeScript Dictionary
    • TypeScript Generic
    • TypeScript Cast Object
    • TypeScript Optional Parameters
    • TypeScript? switch
    • TypeScript promise
    • TypeScript tuple
    • TypeScript Hashmap
    • TypeScript let
    • TypeScript Getter
    • TypeScript Pattern Matching
    • TypeScript number to string
    • TypeScript substring
    • TypeScript?lambda
    • TypeScript UUID
    • TypeScript JSDoc
    • TypeScript Decorators
    • Typescript for loop
    • TypeScript HTTP Request
    • TypeScript Abstract Class
    • TypeScript Question Mark
    • TypeScript Nullable
    • TypeScript reduce
    • TypeScript Mixins
    • TypeScript keyof
    • TypeScript string to number
    • TypeScript JSON parse
    • TypeScript const
    • TypeScript declare module
    • TypeScript String
    • TypeScript filter
    • TypeScript Multiple Constructors
    • TypeScript? Set
    • TypeScript string interpolation
    • TypeScript instanceof
    • TypeScript JSON
    • TypeScript Arrow Function
    • TypeScript generator
    • TypeScript namespace
    • TypeScript default parameter
    • TypeScript cast
    • TypeScript babel
    • Typescript Key-Value Pair
    • TypeScript if
    • TypeScript keyof Enum
    • TypeScript wait
    • TypeScript Optional Chaining
    • TypeScript JSX
    • TypeScript Version Check
    • TypeScript Unit Testing
    • TypeScript Handbook
    • TypeScript module
    • TypeScript Extend Interface
    • TypeScript npm
    • TypeScript pick
    • TypeScript Interface Default Value
    • JavaScript import module
    • Obfuscate Javascript
    • TypeScript basics
    • setInterval TypeScript
  • Type of Union
    • TypeScript Object Type
    • TypeScript type check
    • TypeScript promise type
    • TypeScript JSON type
    • TypeScript Union Types
    • TypeScript typeof
    • TypeScript Types
  • Function Of Array
    • TypeScript Function Interface
    • TypeScript Functions
    • TypeScript Export Function
    • TypeScript function return type

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 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:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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:

TypeScript Array of Objects 1

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:

TypeScript Array of Objects 2

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:

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 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.

  1. TypeScript Nullable
  2. TypeScript Abstract Class
  3. TypeScript Question Mark
  4. TypeScript Decorators
Primary Sidebar
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
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
EDUCBA

*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