Blog

In this topic, we will discuss about arrays in Typescript.

The use of variables to store values poses the following limitations −

• Variables are scalar in nature. In other words, a variable declaration can only contain a single at a time. This means that to store n values in a program n variable declarations will be needed. Hence, the use of variables is not feasible when one needs to store a larger collection of values.
• Variables in a program are allocated memory in random order, thereby making it difficult to retrieve/read the values in the order of their declaration.

TypeScript introduces the concept of arrays to tackle the same. An array is a homogenous collection of values. To simplify, an array is a collection of values of the same data type. It is a user defined type.

Features of an Array

Here is a list of the features of an array −

• An array declaration allocates sequential memory blocks.
• Arrays are static. This means that an array once initialized cannot be resized.
• Each memory block represents an array element.
• Array elements are identified by a unique integer called as the subscript / index of the element.
• Like variables, arrays too, should be declared before they are used. Use the var keyword to declare an array.
• Array initialization refers to populating the array elements.
• Array element values can be updated or modified but cannot be deleted.

Declaring and Initializing Arrays

To declare an initialize an array in Typescript use the following syntax −

Syntax

var array_name[:datatype];        //declaration 
array_name = [val1,val2,valn..]   //initialization

An array declaration without the data type is deemed to be of the type any. The type of such an array is inferred from the data type of the array’s first element during initialization.

For example, a declaration like − var numlist:number[] = [2,4,6,8] will create an array as given below −

The array pointer refers to the first element by default.

Arrays may be declared and initialized in a single statement. The syntax for the same is −

var array_name[:data type] = [val1,val2…valn]

Note − The pair of [] is called the dimension of the array.

Accessing Array Elements

The array name followed by the subscript is used refer to an array element. Its syntax is as follows −

array_name[subscript] = value

Example: Simple Array

var alphas:string[]; 
alphas = ["1","2","3","4"] 
console.log(alphas[0]); 
console.log(alphas[1]);

On compiling, it will generate following JavaScript code −

//Generated by typescript 1.8.10
var alphas;
alphas = ["1", "2", "3", "4"];
console.log(alphas[0]);
console.log(alphas[1]);

The output of the above code is as follows −

1 
2 

Example: Single statement declaration and initialization

var nums:number[] = [1,2,3,3] 
console.log(nums[0]); 
console.log(nums[1]); 
console.log(nums[2]); 
console.log(nums[3]);

On compiling, it will generate following JavaScript code −

//Generated by typescript 1.8.10
var nums = [1, 2, 3, 3];
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);

Its output is as follows −

1 
2 
3 
3 

Array Object

An array can also be created using the Array object. The Array constructor can be passed.

• A numeric value that represents the size of the array or
• A list of comma separated values.

The following example shows how to create an array using this method.

Example

var arr_names:number[] = new Array(4)  

for(var i = 0;i<arr_names.length;i++) { 
   arr_names[i] = i * 2 
   console.log(arr_names[i]) 
}

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10
var arr_names = new Array(4);

for (var i = 0; i < arr_names.length; i++) {
   arr_names[i] = i * 2;
   console.log(arr_names[i]);
}

Its output is as follows −

0 
2 
4 
6 

Example: Array Constructor accepts comma separated values

var names:string[] = new Array("Zafrul","Subrat","Jay","Ajit") 

for(var i = 0;i<names.length;i++) { 
   console.log(names[i]) 
}

On compiling, it will generate following JavaScript code −

//Generated by typescript 1.8.10
var names = new Array("Zafrul", "Subrat", "Jay", "Ajit");
for (var i = 0; i < names.length; i++) {
   console.log(names[i]);
}

Its output is as follows −

Zafrul
Subrat
Jay
Ajit

Array Methods

A list of the methods of the Array object along with their description is given below.

Array Destructuring

Refers to breaking up the structure of an entity. TypeScript supports destructuring when used in the context of an array.

Example

var arr:number[] = [12,13] 
var[x,y] = arr 
console.log(x) 
console.log(y)

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10
var arr = [12, 13];
var x = arr[0], y = arr[1];
console.log(x);
console.log(y);

Its output is as follows −

12 
13

Array Traversal using for…in loop

One can use the for…in loop to traverse through an array.

var j:any; 
var nums:number[] = [1001,1002,1003,1004] 

for(j in nums) { 
   console.log(nums[j]) 
} 

The loop performs an index based array traversal.

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10
var j;
var nums = [1001, 1002, 1003, 1004];

for (j in nums) {
   console.log(nums[j]);
}

The output of the above code is given below −

1001 
1002 
1003 
1004

Arrays in TypeScript

TypeScript supports the following concepts in arrays −