Array And Its Types In TypeScript

Introduction

 

Many times we are using array while creating applications or implementing functionality. In this article will learn the array in detail, and its types as well.

 

What is Array in TypeScript? 

• We can store the similar or different types of values into it, which means the data type can be the same or different.
• We can declare an array the type of the elements followed by [].
• Elements are stored sequentially, based on syntax & can be accessed using Index.
• Array in TypeScript is similar to JavaScript.
• We have to declare an array before using it.

Syntax

 

Using square brackets we can declare an array like

var/let myArrayName [:datatype] = [val1,val2,valn..]; //declaration & initialization

Using generic type we can declare an array like

var/let myArrayName <element-type> = [val1,val2,valn..]; //declaration & initialization

Here initialization is not mandatory. We can use class/model as well.

 

Example

let penManufacturs: string[] = ['Cello', 'Aurora', 'Parker', 'A.T Cross','Shanghai Hero'];
for(let i : number = 0; i < penManufacturs.length; i++)
{
   console.log("Index of an array is "+ i + " & the value is : " + penManufacturs[i]);
}

By using generic type we can define an array like:

let penManufacturs: <string>[] = ['Cello', 'Aurora', 'Parker', 'A.T Cross','Shanghai Hero'];
for(let i : number = 0; i < penManufacturs.length; i++)
{
   console.log("Index of an array is "+ i + " & the value is : " + penManufacturs[i]);
}

Output

 

Both the examples give us the same output:

 

Index of an array is 0 & the value is : Cello

Index of an array is 1 & the value is : Aurora

Index of an array is 2 & the value is : Parker

Index of an array is 3 & the value is : A.T Cross

Index of an array is 4 & the value is : Shanghai Hero

 

Multi Type Array

• Multi Type array contains elements of different data types like number, string, boolean etc using a generic array type.
• The advantage is we can use different data types in a single array.

Syntax

var/let myArrayName: (datatype1 | datatype2)[] = [val1,val2,valn..];

Example

 

In the below example we will print the even records as we would like to print the manufacturer name & price because elements are stored in a continuous manner so will consider the next element for price.

let penManufactursWithDetails: (string | number) [] = ['Cello', 100, 'Aurora', 200, 'Parker', 300, 'A.T Cross', 400, 'Shanghai Hero', 500];
for(let i : number = 0; i < penManufactursWithDetails.length; i++)
{
   if(i % 2 == 0)
   console.log("Company Name is : " + penManufactursWithDetails[i] + " & the price is : " + penManufactursWithDetails[i + 1]);
}

Output of the above program is,

 

Company Name is : Cello & the price is : 100

Company Name is : Aurora & the price is : 200

Company Name is : Parker & the price is : 300

Company Name is : A.T Cross & the price is : 400

Company Name is : Shanghai Hero & the price is : 500

 

Types of array

 

Single Dimensional

 

To declare single dimensional array use type of array followed by [] symbol.

 

Example

let myArray : number = [100,200,300,400,500 ];
console.log(myArray[0]);
console.log(myArray[1]);

Output

 

100

200

 

We can reinitialize an array as below and if we try to find an index which is not present in the array then it will be undefined.

 

Example

let myArray: number = [100, 200, 300, 400, 500];
console.log(myArray[0]);
// reinitialize an array
myArray = [1000, 2000, 3000, 4000];
console.log(myArray[1]);
console.log(myArray[5]);

Output

 

100

2000

undefined

 

Two Dimensional

 

To declare two dimensional array use type of array followed by [][] symbol.

 

Example

 

Consider below example of two dimensional array which contains first name & last name. User would like to print first name & last name using for loop.

let employeeDetails: string[][] = [["Sam", "Roy"], ["Jeet", "Yadav"], ["Geeta", "Kalam"]];
for (let i: number = 0; i < employeeDetails.length; i++)
{
   for (let j: number = 0; j < employeeDetails[i].length; j++)
   {
      if(j%2 == 0)
      console.log(employeeDetails[i][j] + " " + employeeDetails[i][j+1])
   }
}

Output

 

First name & last name will get printed.

 

Sam Roy

Jeet Yadav

Geeta Kalam

 

Three dimensional array

 

To declare three dimensional array use type of array followed by [][][] symbol.

 

Question

 

How can we read the following array?

let employeeDetails: string[2][1][3];

Answer

 

The employeeDetails is the three dimensional array which contains one three dimensional array. Each three dimensional array contains one one dimensional array, each one dimensional array contains three elements & each element is of type string.

 

Example

let employeeDetails: string[][][] = [[["Sam", "Roy","Flat No 12"]], [["Amol", "Shah", "Flat No 64"]]];
for (let i: number = 0; i < employeeDetails.length; i++)
{
   for (let j: number = 0; j < employeeDetails[i].length; j++)
   {
      for (let k: number = 0; k < employeeDetails[j].length; k++)
      {
         if (k % 2 == 0)
         {
            console.log("Indexing in array i j k is => " + i + " " + j + " " + k);
            console.log(employeeDetails[i][j][k] + " " + employeeDetails[i][j][k+1] + " " + employeeDetails[i][j][k+2]);
         }
      }
   }
}

Output

 

Indexing in array i j k is => 0 0 0

Sam Roy Flat No 12

Indexing in array i j k is => 1 0 0

Amol Shah Flat No 64

 

Summary

 

In this article, you learned Array & its types in TypeScript.