How to Declare Array of Objects in TypeScript

  2. HowTo
  3. TypeScript Howtos
  4. How to Declare Array of Objects in …
Muhammad Maisam Abbas Feb 02, 2024
TypeScript TypeScript Array TypeScript Object
  1. Inline Type for Array of Objects in TypeScript
  2. Use Property id for Array of Objects in TypeScript
  3. Use Interface to Define Array of Objects in TypeScript
  4. Print All Objects in the Array With Interface Structure in TypeScript
How to Declare Array of Objects in TypeScript

One way to declare an array in TypeScript is an array of objects used to store multiple values in a variable. The properties defined must be declared in each object.

This tutorial will cover the concept of the array of objects defined using inline type and using the interface in TypeScript.

Inline Type for Array of Objects in TypeScript

The array of objects is defined inside the curly brackets {}. The array of objects can be defined using inline type.

Example:

let detail: {name: string, gender: string, age: number}[] = [
{"name": "John", "gender": "male", "age": 20},
{"name": "Carter", "gender": "male", "age": 18},
{"name": "Kate", "gender": "female", "age": 19},
{"name": "Louis", "gender": "male", "age": 21},
];

console.log('Hi, I am ' + detail[0].name + '. I am a ' + detail[0].gender + ' and I am ' + detail[0].age + ' years old.');
console.log('Hi, I am ' + detail[2].name + '. I am a ' + detail[2].gender + ' and I am ' + detail[2].age + ' years old.');

Output:

Hi, I am John. I am a male and I am 20 years old.
Hi, I am Kate. I am a female and I am 19 years old.

The detail[] is the array of inline types name, gender and age defined with types string, string and number, respectively. The important concept in the above example is that the array detail has no type defined.

In TypeScript, the array is also considered a data type similar to string, number, etc.

Use Property id for Array of Objects in TypeScript

This concept is very useful when working on a project. Whenever we make an array of objects, it is good to pass the id property as it will benefit uniqueness and project development.

Example:

let detail: {id: number, name: string, gender: string, age: number}[] = [
{"id": 1, "name": "John", "gender": "male", "age": 20},
{"id": 2, "name": "Carter", "gender": "male", "age": 18},
{"id": 3, "name": "Kate", "gender": "female", "age": 19},
{"id": 4, "name": "Louis", "gender": "male", "age": 21},
];

console.log('ID = ' + detail[0].id + '. Hi, I am ' + detail[0].name + '. I am a ' + detail[0].gender + ' and I am ' + detail[0].age + ' years old.');
console.log('ID = ' + detail[2].id + '. Hi, I am ' + detail[2].name + '. I am a ' + detail[2].gender + ' and I am ' + detail[2].age + ' years old.');

Output:

ID = 1. Hi, I am John. I am a male and I am 20 years old.
ID = 3. Hi, I am Kate. I am a female and I am 19 years old.

Use Interface to Define Array of Objects in TypeScript

The interface is the easy and most used way of defining the array of objects in TypeScript. An interface is a framework that defines an object’s wide range of properties and methods.

The properties defined in the interface are to be called in the objects.

Example:

interface Details {
id: number;
name: string;
gender: string;
age: number;
};

let test1 : Details = {
id: 0,
name: "John",
gender: "male",
age: 17
};

let test2 : Details = {
id: 1,
name: "Kate",
gender: "female",
age: 19
};

let test3 : Details = {
id: 2,
name: "Chips",
gender: "male",
age: 22
};

let detail: Details[] = [];
detail.push(test1);
detail.push(test2);
detail.push(test3);

console.log('The first entry of the array is', detail[0]);

Output:

The first entry of the array is { id: 0, name: 'John', gender: 'male', age: 17 }

Let us say that the user forgot to define the age property in the object test1. An error will be raised indicating that "a property age is missing but is required in the type Details".

To overcome this issue, the user can make the property optional using the syntax age?: number in the interface Details, like in the following snippet.

Example:

interface Details {
id: number;
name: string;
gender: string;
age?: number;
};

let test1 : Details = {
id: 0,
name: "John",
gender: "male",
};

let test2 : Details = {
id: 1,
name: "Kate",
gender: "female",
age: 19
};

let test3 : Details = {
id: 2,
name: "Chips",
gender: "male",
age: 22
};

let detail: Details[] = [];
detail.push(test1);
detail.push(test2);
detail.push(test3);

console.log('The first entry of the array is', detail[0]);
console.log('The second entry of the array is', detail[1]);

Output:

The first entry of the array is { id: 0, name: 'John', gender: 'male' }
The second entry of the array is { id: 1, name: 'Kate', gender: 'female', age: 19 }

The output statement age was given for the second entry but not for the first entry, and no error was raised. This is because the property age is optional in the interface Details.

Let us take another example below which the whole array will be called to print all the objects in the array.

Example:

interface Details {
id: number;
name: string;
gender: string;
age: number;
};

let test1 : Details = {
id: 0,
name: "John",
gender: "male",
age: 17
};

let test2 : Details = {
id: 1,
name: "Kate",
gender: "female",
age: 19
};

let test3 : Details = {
id: 2,
name: "Chips",
gender: "male",
age: 22
};

let detail: Details[] = [];
detail.push(test1);
detail.push(test2);
detail.push(test3);

console.log('The array is', detail);

Output:

The array is,  [{
"id": 0,
"name": "John",
"gender": "male",
"age": 17
}, {
"id": 1,
"name": "Kate",
"gender": "female",
"age": 19
}, {
"id": 2,
"name": "Chips",
"gender": "male",
"age": 22
}]
Author: Muhammad Maisam Abbas
Muhammad Maisam Abbas avatar Muhammad Maisam Abbas avatar

Maisam is a highly skilled and motivated Data Scientist. He has over 4 years of experience with Python programming language. He loves solving complex problems and sharing his results on the internet.

LinkedIn

Related Article - TypeScript Array

Related Article - TypeScript Object