How can I Define an Array of Objects in TypeScript?

In TypeScript, the way of defining the arrays of objects is different from JavaScript. Because we need to explicitly type the array at the time of declaration that it will be an Array of objects. In this article, we will discuss the different methods for declaring an array of objects in TypeScript.

There are many methods of declaring an array of objects in TypeScript as listed below:

Using the inline type declaration

In this method, we will use an object literal with some pre-defined keys and values to explicitly type the array as an array of objects and then assign the values to the properties of the object.

Syntax:

const array_name: {key1: type1, key2: type2, key3: type3}[] = [{}];

Example: The below example will explain how you can define an array of objects using inline typing.

Javascript

let myArr: {
    cktr_name: string, cktr_team: string,
    cktr_runs: number
}[] = [
        {
            cktr_name: "Virat Kohli",
            cktr_team: "India",
            cktr_runs: 26000
        },
        {
            cktr_name: "AB De Villiers",
            cktr_team: "South Africa",
            cktr_runs: 15000
        },
        {
            cktr_name: "David Warner",
            cktr_team: "Australia",
            cktr_runs: 13000
        }
    ];

myArr.forEach((cktr) => {
    console.log(`Hi, My name is ${cktr.cktr_name},
     I play for ${cktr.cktr_team} and
    I've already made ${cktr.cktr_runs}
     runs while representing my country.`)
})

Output:

Hi, My name is Virat Kohli, I play for India and I've already made 26000 runs while representing my country.
Hi, My name is AB De Villiers, I play for South Africa and I've already made 15000 runs while representing my country.
Hi, My name is David Warner, I play for Australia and I've already made 13000 runs while representing my country.

Using the in-built interfaces and type

In this approach, first we will define the format of the object inside a interface ot type defined using the respective kerwords. While defining interfaces or type, we will provide the property names and their types inside them and assign them as a explicit type the array.

Syntax:

interface/ type interface_name{
    key1: type1,
    key2: type2,
    key3: type3
}
const array_name: interface_name = [];

Example: The below example will illustarte the use of the interfaces to define an array of objects, you can declare interface as type and can use type also for the same purpose.

Javascript

interface Cricketer {
    cktr_name: string,
    cktr_team: string,
    cktr_runs: number
}
const cktr1 = {
    cktr_name: "Virat Kohli",
    cktr_team: "India",
    cktr_runs: 26000
}
const cktr2 = {
    cktr_name: "AB De Villiers",
    cktr_team: "South Africa",
    cktr_runs: 15000
}
const cktr3 = {
    cktr_name: "David Warner",
    cktr_team: "Australia",
    cktr_runs: 13000
}

const myArr: Cricketer[] = [cktr1, cktr2, cktr3];

myArr.forEach((cktr) => {
    console.log(`Hi, My name is ${cktr.cktr_name},
     I play for ${cktr.cktr_team} and
    I've already made ${cktr.cktr_runs}
    runs while representing my country.`)
})

Output:

Hi, My name is Virat Kohli, I play for India and I've already made 26000 runs while representing my country. 
Hi, My name is AB De Villiers, I play for South Africa and I've already made 15000 runs while representing my country. 
Hi, My name is David Warner, I play for Australia and I've already made 13000 runs while representing my country.

Using the built-in Array type

We can also use the built-in Array type to define an array of object in TypeScript.

Syntax:

const array_name: Array<{key1: type1, key2: type2, key3: type3}> = [{}];

Example: This example will show you the use of the Array type to create an array of object in TypeScript.

Javascript

let myArr: Array<{
    cktr_name: string,
    cktr_team: string, cktr_runs: number
}> = [
        {
            cktr_name: "Virat Kohli",
            cktr_team: "India",
            cktr_runs: 26000
        },
        {
            cktr_name: "AB De Villiers",
            cktr_team: "South Africa",
            cktr_runs: 15000
        },
        {
            cktr_name: "David Warner",
            cktr_team: "Australia",
            cktr_runs: 13000
        }
    ];

myArr.forEach((cktr) => {
    console.log(`Hi, My name is ${cktr.cktr_name},
     I play for ${cktr.cktr_team} and
    I've already made ${cktr.cktr_runs}
    runs while representing my country.`)
})

Output:

Hi, My name is Virat Kohli, I play for India and I've already made 26000 runs while representing my country. 
Hi, My name is AB De Villiers, I play for South Africa and I've already made 15000 runs while representing my country. 
Hi, My name is David Warner, I play for Australia and I've already made 13000 runs while representing my country.

Using the typeof operator

In this method, we will first create an JavaScript object with some key value pairs inside it and then explicitly assign the type of that object to the array using the typeof operator and built-in array type.

Syntax:

const obj_name = {
    key1: val1,
    key2: val2
}
const array_name: Array<typeof obj_name> = [{}]

Example: The below example will explain the above approach practically.

Javascript

const cktr1 = {
    cktr_name: "Virat Kohli",
    cktr_team: "India",
    cktr_runs: 26000
}
const cktr2 = {
    cktr_name: "AB De Villiers",
    cktr_team: "South Africa",
    cktr_runs: 15000
}
const cktr3 = {
    cktr_name: "David Warner",
    cktr_team: "Australia",
    cktr_runs: 13000
}

const myArr: Array<typeof cktr1> = [cktr1,
    cktr2, cktr3];

myArr.forEach((cktr) => {
    console.log(`Hi, My name is ${cktr.cktr_name},
     I play for ${cktr.cktr_team} and
    I've already made ${cktr.cktr_runs}
    runs while representing my country.`)
})

Output:

Hi, My name is Virat Kohli, I play for India and I've already made 26000 runs while representing my country. 
Hi, My name is AB De Villiers, I play for South Africa and I've already made 15000 runs while representing my country. 
Hi, My name is David Warner, I play for Australia and I've already made 13000 runs while representing my country.