TypeScript Array

A typescript array can store multiple values of same data types sequentially. Arrays in typescript are homogeneous collection of values which is very similar to other programming languages.

Arrays are always of fixed size. An array, once it is created, cannot be resized. Individual elements at various positions in the array are accessed via their index.

We will learn to create an array, clone an array, merge arrays and iterate through the elements of an array in TypeScript with easy-to-follow examples.

Table of Contents

1. Create Array
2. Adding elements to Array
3. Iterate Through Array
4. Clone Array
5. Merge Arrays

1. Creating an Array

Like JavaScript, TypeScript has an Array type to allow the assignment of multiple values. The array is specified by adding a square bracket after the type.

To use the type-safety capability of TypeScript, we can add diamond brackets to specify the type of the elements in the array. Every time a new value is added to such a generic array, the compiler checks for type compatibility and alerts if there is a type mismatch.

Following example declares a boolean array and then initializes it values.

//Various ways to declare a typed array
let myArr1: boolean[];
let myArr2: boolean[] = [];
let myArr3: boolean[] = new Array();
let myArr4: boolean[] = Array();

//Initializing an array
myArr1 = [false, false, true];

Given example combine the declaration and initialization in same step.

let flags: boolean[] = [false, false, true];	

//or

let flags: Array<boolean> = [false, false, true];

Similar to above examples, we can declare an array of numbers as following.

let scores: number[] = [10, 20, 30, 40];	

//or

let scores: Array<number> = [10, 20, 30, 40];	

2. Adding elements to Array

The push() method appends the given value at the last of an array, and returns the size of the new array created as a result of push() operation.

It helps in treating the arrays a Dynamic lists.

//array of numbers
let scores: number[] = [10, 20, 30, 40];

scores.push( 50 );	//[10, 20, 30, 40, 50]

scores.push( 'abc' );	 //data.ts(24,14): error TS2345: Argument of type '"abc"' is not  
						//assignable to parameter of type 'number'.

3. Iterating through an Array

We can use either for loops to iterate over array elements.

3.1. Using “for…of” loop

let scores :number[] = [10, 20, 30, 40];	

for (var score of scores) {
	console.log(score);		//Outputs 10 20 30 40
}

3.2. Using traditional for loop

let scores :number[] = [10, 20, 30, 40];	

for (var i = 0; i < scores.length; i++) {
	console.log(scores[i]);		//Outputs 10 20 30 40
}

4. Cloning an Array

Use spread operator to clone array. It is the easiest and the most recommended way.

let origScores: number[] = [10, 20, 30];	

let clonedScores: number[] = [...origScores];

console.log(clonedScores);		//[10, 20, 30]

origScores.push( 40 );

console.log(origScores);		//[10, 20, 30, 40] is "changed"
console.log(clonedScores);		//[10, 20, 30] 	is "unchanged"

5. Merging two Arrays

Use spread operator for merging arrays as well. It’s simplest and recommended way.

let scores1: number[] = [10, 20, 30];	
let scores2: number[] = [40, 50, 60];	

let mergedScore = [...scores1, ...scores2];

console.log(mergedScore);	//[ 10, 20, 30, 40, 50, 60 ]

Drop me your questions in the comments section.

Happy Learning !!