Arrays in TypeScript

Array is a data structure used for storing collection of variables of the same type.So if we have 5 variables of int datatype named var1,var2,var3,var4,var5  then a better approach is to use array to define the collection of variables.Arrays in TypeScript are useful for defining such collections.

The elements of an array are stored sequentially in memory.This makes accessing the elements by index very fast.Arrays in TypeScript have some useful methods for manipulating collection of elements.

Arrays are quite useful when working with a collection of data elements of same type.When working with array we need to know how to declare array and how to perform common operations.

Arrays in TypeScript

Arrays in TypeScript are similar to arrays to arrays in other languages.Array has following features

• Stored sequentially in memory
• Contains elements of the same type
• Size of array can not be changed after arrays is declared

Array Declaration

Arrays in TypeScript are declared like normal variables.But they use the square brackets [] to mark the variable as an array.

var numbers:number[]=[];
numbers=[1,2,3,4,5];

We declare number like a normal variable of datatype number.But after the datatype number we have put square brackets []

var numbers:number []

It is important to understand that following is invalid in TypeScript.You don’t use type to initialize array.

var numbers:number[]=number[5];

Creating array using constructor

We can also create array object using constructor of Array class as:

var arrObj:number[] = new Array(5)

the above declaration will create an array of number type having size of 5.

We can also pass the elements in the arrays constructor:

var arrObj:number[] = new Array(1,2,3,4,5)

Assigning elements to Array

Array is instantiated when we assign a value using the equals operator.In the above example we didn’t assign any value to the array.This is because we didn’t put any values inside the square brackets.

An important thing to understand is that array indexes starts from 0.To obtain an element from an arrays we use the square brackets.

If we declare an array called a as:

then we can access the elements as:

1. 1st element a[0]  =10
2. 1st element a[1]  = 25
3. 1st element a[2]  =2
4. 1st element a[3]  =45

But we can also declare and assign the  values to array in a single line as:

var Numbers:number[]=[1,2,3,4,5];

There is an alternate way to declare arrays using the Array<T> generic type.Using this syntax we can declare the numbers array as:

var Numbers:Array<number>=[1,2,3,4,5];

Adding Elements

In TypeScript arrays elements can also be added after array declaration.To add elements after an array is declared we use push() method.So to add elements to the numbers array we can use the push() method as:

Numbers.push(1);
Numbers.push(2);
Numbers.push(3);
Numbers.push(4);
Numbers.push(5);

Instead of using the push() method we can insert elements in the arrays using the index as:

Numbers[0]=1;
Numbers[1]=2;
Numbers[3]=3;
Numbers[4]=4;
Numbers[5]=5;

We can also update data in typescript array using index as:

Numbers[0]=5;
Numbers[1]=4;
Numbers[3]=3;
Numbers[4]=2;
Numbers[5]=1;

Removing an element

To remove the data in the array we use the pop() method as:

Numbers.pop();

pop method removes the last element in the array.So if we declare array as

var Numbers:number[]=[1,2,3,4,5];

then the pop method will remove the number 5 from the numbers array.

To remove elements at specific position we use the splice() method as:

Numbers.splice(1, 1);

The above method will remove the second element from the Numbers array.As array index starts at position 0 so splice(1, 1) will remove the second element from the array.

Array forEach

If we have declared array called numbers as:

let numbers=[1,2,3,4,5];

then we can iterate the array using foreach as:

numbers.forEach(function (num) {
console.log(num);
});

Concatenate array elements

To concatenate all the elements of an array using a separator string we can use the join() method as:

Numbers.join(",");

The above method will return the string  1,2,3,4,5

Check if an Array contains a list of elements

This is a common scenario when we need to check if a TypeScript array contains an element.To implement this functionality we can use the TypeScript array some method.This method is called for every element in the array.

The some method expects a callback.This callback is called for every array element.So to verify if an array contains a list of element we can use the following code

 var contains=false;
function Contains(element, index, array) {

if (element == 1 || element == 2) {
contains = true;
}

return contains;
}

var retval = [2, 3, 9, 0, 4,66,54].some(Contains);

The retval variable above will contain the value true if an element exists in the array otherwise it will return false.

So Arrays in TypeScript have some useful methods for different scenarios .These array methods are useful for many common scenarios.

For basic concepts about TypeScript please check Overview Of TypeScript

If you want to understand how to develop applications using TypeScript: TypeScript Tutorial

Follow on: