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
  1. var/let myArrayName [:datatype] = [val1,val2,valn..]; //declaration & initialization  
Using generic type we can declare an array like
  1. var/let myArrayName <element-type> = [val1,val2,valn..]; //declaration & initialization  
Here initialization is not mandatory. We can use class/model as well.
 
Example
  1. let penManufacturs: string[] = ['Cello''Aurora''Parker''A.T Cross','Shanghai Hero'];  
  2. for(let i : number = 0; i < penManufacturs.length; i++)  
  3. {  
  4.    console.log("Index of an array is "+ i + " & the value is : " + penManufacturs[i]);  
  5. }  
By using generic type we can define an array like:
  1. let penManufacturs: <string>[] = ['Cello''Aurora''Parker''A.T Cross','Shanghai Hero'];  
  2. for(let i : number = 0; i < penManufacturs.length; i++)  
  3. {  
  4.    console.log("Index of an array is "+ i + " & the value is : " + penManufacturs[i]);  
  5. }  
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
  1. 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.
  1. let penManufactursWithDetails: (string | number) [] = ['Cello', 100, 'Aurora', 200, 'Parker', 300, 'A.T Cross', 400, 'Shanghai Hero', 500];  
  2. for(let i : number = 0; i < penManufactursWithDetails.length; i++)  
  3. {  
  4.    if(i % 2 == 0)  
  5.    console.log("Company Name is : " + penManufactursWithDetails[i] + " & the price is : " + penManufactursWithDetails[i + 1]);  
  6. }  
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
  1. let myArray : number = [100,200,300,400,500 ];  
  2. console.log(myArray[0]);  
  3. 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
  1. let myArray: number = [100, 200, 300, 400, 500];  
  2. console.log(myArray[0]);  
  3. // reinitialize an array  
  4. myArray = [1000, 2000, 3000, 4000];  
  5. console.log(myArray[1]);  
  6. 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.
  1. let employeeDetails: string[][] = [["Sam""Roy"], ["Jeet""Yadav"], ["Geeta""Kalam"]];  
  2. for (let i: number = 0; i < employeeDetails.length; i++)  
  3. {  
  4.    for (let j: number = 0; j < employeeDetails[i].length; j++)  
  5.    {  
  6.       if(j%2 == 0)  
  7.       console.log(employeeDetails[i][j] + " " + employeeDetails[i][j+1])  
  8.    }  
  9. }  
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?
  1. 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
  1. let employeeDetails: string[][][] = [[["Sam""Roy","Flat No 12"]], [["Amol""Shah""Flat No 64"]]];  
  2. for (let i: number = 0; i < employeeDetails.length; i++)  
  3. {  
  4.    for (let j: number = 0; j < employeeDetails[i].length; j++)  
  5.    {  
  6.       for (let k: number = 0; k < employeeDetails[j].length; k++)  
  7.       {  
  8.          if (k % 2 == 0)  
  9.          {  
  10.             console.log("Indexing in array i j k is => " + i + " " + j + " " + k);  
  11.             console.log(employeeDetails[i][j][k] + " " + employeeDetails[i][j][k+1] + " " + employeeDetails[i][j][k+2]);  
  12.          }  
  13.       }  
  14.    }  
  15. }  
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.