How to Initialize an Array of Objects in TypeScript?

In TypeScript, initialize an array of objects by specifying the type of the array as an array of a class or interface that defines the properties of the objects to store. This allows the creation of arrays that contain complex data structures, including collections of objects with multiple properties. Initializing an array of objects in TypeScript involves defining the class or interface for the objects, creating an array of objects, and accessing the objects in the array using index notation.

This blog will demonstrate the procedure to initialize an array of objects in TypeScript.

How to Initialize an Array of Objects in TypeScript?

For initializing an array of objects in TypeScript, use the following approaches:

Using Class
Using Interface
Using Inline Type Initialization

JavaScript file and then run the JavaScript code on the terminal using the given commands:

tsc filename.ts
node filename.js

Method 1: Initialize an Array of Objects in TypeScript Using Class

In TypeScript, a “class” is utilized for defining a blueprint to create objects with specific properties/attributes and methods. To initialize an array of objects in TypeScript using a class, follow the given steps:

First, define the class with its properties and methods.
Then, create an array of objects of the class type and add objects to the array by instantiating the class with specific values.
After creating an array of objects, perform various operations on the objects, such as iterating through the array, accessing properties, and so on.

Example
In the given example, first, we will create a class named “Employee” with four properties where the “salary” is the optional property and a constructor of the class that sets the values of the properties:

class Employee{
name: string;
age: number;
designation: string;
salary?: string;
constructor(n: string, a: number, d: string, s?: string){
this.name = n;
this.age = a;
this.designation = d;
this.salary = s;
}
}

Then, create an array of objects “emp” of the “Employee” type and add objects to the array:

let emp: Employee[] = [
new Employee('Mili', 22, "HR", "450$"),
new Employee('Lilac', 26, "Accountant"),
new Employee('Stephen', 32, "Sr.Accountant", "690$")
];

Finally, print the array of objects on the console using the “console.log()” method:

console.log(emp);

Output

Method 2: Initialize an Array of Objects in TypeScript Using Interface

In TypeScript, an “interface” is used to define a syntactical contract for the shape of an object. To initialize an array of objects in TypeScript using an interface, follow the below steps:

First, define the interface with its properties.
Then, create an array of objects that adhere to the interface and add objects to the array.

Example
Here, we will create an interface named “Employee” with properties and their types:

interface Employee {
name: string;
age: number;
designation: string;
salary?: string;
}

Declare and initialize the array of objects by adding objects in the array:

const emp: Employee[] = [
{ name: "Mili", age: 22, designation: "HR", salary: "450$" },
{ name: "Lilac", age: 26, designation: "Accountant" },
{ name: "Stephen", age: 32, designation: "Sr.Accountant", salary: "690$" }
];

Now, display it on the console:

console.log(emp);

Output

Method 3: Initialize an Array of Objects in TypeScript Using Inline Type Initialization

Another way to initialize an array of objects in TypeScript is “inline type initialization”. In this approach, you can define the object types inline in the array initialization using a type alias. It can be useful for small and simple objects where defining a separate interface or type alias may not be necessary.

Example
Declare and initialize an array of objects by using a type alias and add the objects in the array:

let emp: { name: string, age: number, designation: string, salary?: string }[] = [
{ "name": "Mili", "age":22, "designation": "HR" },
{ "name": "Lilac", "age":26, "designation": "Accountant", "salary": "450$" },
{ "name": "Stephen", "age":32, "designation": "Sr.Accountant", "salary": "690$" }
];

Lastly, we will print the array of objects on the console:

console.log(emp);

Output

That’s all about initializing a TypeScript array of objects.

Conclusion

To initialize an array of objects in TypeScript, use “class”, “interface”, or “inline type initialization” techniques. The class and the interface are the most commonly used and preferable for initializing the array of objects in TypeScript. This article demonstrated various methods to initialize an array of objects in TypeScript.

How to Initialize an Array of Objects in TypeScript?