TypeScript Arrays

An array is a data structure that stores a fixed-size collection of elements of the same type in contiguous memory locations. Elements are accessed by index, starting from 0. Arrays can store multiple values, but cannot expand once their size is declared.

Features of an Array 

• Stores elements of the same type.
• Elements are in contiguous memory locations.
• Supports index-based access.
• The array name represents the starting address.

Declaring Arrays in TypeScript

TypeScript supports arrays similar to JavaScript. There are two ways to declare an array:

1. Using square brackets

Arrays can be declared using square brackets [] with a type annotation:

Syntax:

let array_name[:datatype] = [val1, val2, valn..]  

Example: 

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: string[] = ["Apple", "Banana", "Cherry"];

console.log(numbers[0]); 
console.log(fruits[2]);  

2. Using Generic Array Type

TypeScript array can contain elements of different data types, as shown below. 

Syntax:

let array_name: Array = [val1, val2, valn..]  

Example: Multi Type Array 

let values: (string | number)[] = ['Apple', 2, 'Orange', 3, 4, 'Banana']; 
// or 
let values: Array = ['Apple', 2, 'Orange', 3, 4, 'Banana']; 

Example: Access Array Elements 

• Array elements access on the basis of index i.e.)ArrayName[index].

let fruits: string[] = ['Apple', 'Orange', 'Banana']; 
fruits[0]; // returns Apple
fruits[1]; // returns Orange
fruits[2]; // returns Banana
fruits[3]; // returns undefined

• We can access the array elements by using the 'FOR' loop:

let fruits: string[] = ['Apple', 'Orange', 'Banana'];

for (let index in fruits) {
    console.log(fruits[index]);  // output: Apple Orange Banana
}

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]); // output: Apple Orange Banana
}

Types of an array

There are two types of an array

1. Single-Dimensional Array

It is the simplest form of an array that contains only one row for storing data. It contains single set of the square bracket ("[]"). 

Syntax: 

let array_name[:datatype]; 

Initialization: 

array_name = [val1, val2, valn..]

Example:

let arr:number[];   
arr = [1, 2, 3, 4]   
console.log("Array[0]: " +arr[0]);   
console.log("Array[1]: " +arr[1]);

Output: 

Array[0]: 1
Array[1]: 2

2. Multi-Dimensional Array 

The data is stored in rows and columns (also known as matrix form) in a Multi-dimensional array.

Syntax: 

let arr_name:datatype[][] = [ [a1, a2, a3], [b1, b2, b3] ];  

Initialization: 

let arr_name:datatype[initial_array_index][referenced_array_index] = [ [val1, val2, val 3], [v1, v2, v3]];  

Example:

let mArray:number[][] = [[10, 20, 30], [50, 60, 70]] ;  
console.log(mArray[0][0]);  
console.log(mArray[0][1]);  
console.log(mArray[0][2]);  
console.log();  
console.log(mArray[1][0]);  
console.log(mArray[1][1]);  
console.log(mArray[1][2]);  

Output: 

10
20
30
50
60
70

Array Object

We can create an Array by using or initializing the Array Object. The Array constructor is used to pass the following arguments to create an Array: 

• With the numeric value which represents the size of an array.
• A list of comma separated values.

Syntax: 

let arr_name:datatype[] = new Array(values);  

Example: 

// Initializing an Array by using the Array object.  
let arr:string[] = new Array("GEEKSFORGEEKS", "2200", "Java", "Abhishek");  
for(var i = 0;i<arr.length;i++) {   
   console.log(arr[i]);  

Output: 

GEEKSFORGEEKS
2200
Java
Abhishek

Passing an Array to a Function

We can pass an Array to a function by specifying the Array name without an index. 

Example:

let arr:string[] = new Array("GEEKSFORGEEKS", "2300", "Java", "Abhishek");   

// Passing an Array in a function  
function display(arr_values:string[]) {  
   for(let i = 0;i<arr_values.length;i++) {   
      console.log(arr[i]);  
   }    
}  

// Calling an Array in a function  
display(arr);

Output 

GEEKSFORGEEKS
2300
Java
Abhishek 

Using TypeScript 'Spread' operator

The spread operator can be used to initialize arrays and objects from another array or object. It can also be used for object destructuring. It is a part of ECMAScript 6 version.

Example:

let arr1 = [ 1, 2, 3];  
let arr2 = [ 4, 5, 6];  

// Create new array from existing array  
let copyArray = [...arr1];     
console.log("CopiedArray: " +copyArray);  

// Create new array from existing array with more elements  
let newArray = [...arr1, 7, 8];  
console.log("NewArray: " +newArray);  

// Create array by merging two arrays  
let mergedArray = [...arr1, ...arr2];  
console.log("MergedArray: " +mergedArray); 

Output:

CopiedArray: 1, 2, 3
NewArray: 1, 2, 3, 7, 8
MergedArray: 1, 2, 3, 4, 5, 6