TypeScript Array

An array object is used to store a set of values with a single variable name.

Arrays are very common.

If you have a set of data (e.g., website names) stored in individual variables as shown below:

var site1 = "Google";
var site2 = "tutorialpro";
var site3 = "Taobao";

This becomes impractical if you have 10, 100, or more such variables. In such cases, we can use arrays to solve the problem:

var sites: string[];
sites = ["Google", "tutorialpro", "Taobao"];

This looks much cleaner.

The syntax for declaring an array in TypeScript is as follows:

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

Or you can initialize the array directly during declaration:

var array_name[: datatype] = [val1, val2…valn]

If the array is declared without a type, it is considered to be of type any, and the type is inferred from the first element during initialization.

Example

Create an array of type number:

var numlist: number[] = [2, 4, 6, 8];

The entire array structure is as follows:

The first index is 0. We can access array elements using their index:

TypeScript

var sites: string[];
sites = ["Google", "tutorialpro", "Taobao"];
console.log(sites[0]);
console.log(sites[1]);

Compiling the above code produces the following JavaScript code:

JavaScript

var sites;
sites = ["Google", "tutorialpro", "Taobao"];
console.log(sites[0]);
console.log(sites[1]);

The output is:

Google
tutorialpro

In the following example, we initialize the array directly during declaration:

TypeScript

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

Compiling the above code produces the following JavaScript code:

JavaScript

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

The output is:

1
2
3
4

Array Object

We can also create arrays using the Array object.

The Array constructor accepts the following values:

• A number representing the array size.
• A list of initial elements separated by commas.

Example

Specify the initial size of the array:

TypeScript

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]);
}

Compiling the above code produces the following JavaScript code:

JavaScript

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]);
}

The output is:

0
2
4
6

In the following example, we initialize the array elements directly:

TypeScript

var sites: string[] = new Array("Google", "tutorialpro", "Taobao", "Facebook");

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

Compiling the above code produces the following JavaScript code:

JavaScript

var sites = new Array("Google", "tutorialpro", "Taobao", "Facebook");
for (var i = 0; i < sites.length; i++) {
    console.log(sites[i]);
}

The output is:

Google
tutorialpro
Taobao
Facebook

Array Destructuring

We can also assign array elements to variables, as shown below:

TypeScript

var arr: number[] = [12, 13];
var [x, y] = arr; // Assigns array elements to variables x and y
console.log(x);
console.log(y);

Compiling the above code produces the following JavaScript code:

JavaScript

var arr = [12, 13];
var x = arr[0], y = arr[1]; // Assigns array elements to variables x and y
console.log(x);
console.log(y);

The output is:

12
13

Array Iteration

We can use a for loop to iterate over the elements of an array:

TypeScript

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

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

Compiling the above code produces the following JavaScript code:

JavaScript

var j;
var nums = [1001, 1002, 1003, 1004];
for (j in nums) {
    console.log(nums[j]);
}

The output is:

1001
1002
1003
1004

Multidimensional Arrays

An array can contain another array, forming a multidimensional array.

The simplest form of a multidimensional array is a two-dimensional array, defined as follows:

var arr_name: datatype[][] = [[val1, val2, val3], [v1, v2, v3]];

Example

Define a two-dimensional array with three elements in each dimension:

TypeScript

var multi: number[][] = [[1, 2, 3], [23, 24, 25]];
console.log(multi[0][0]);
console.log(multi[0][1]);
console.log(multi[0][2]);
console.log(multi[1][0]);
console.log(multi[1][1]);
console.log(multi[1][2]);

Compiling the above code produces the following JavaScript code:

JavaScript

var multi = [[1, 2, 3], [23, 24, 25]];
console.log(multi[0][0]);
console.log(multi[0][1]);
console.log(multi[0][2]);
console.log(multi[1][0]);
console.log(multi[1][1]);
console.log(multi[1][2]);

The output is:

1
2
3
23
24
25

Using Arrays in Functions

Passing Arrays to Functions

TypeScript

var sites: string[] = new Array("Google", "tutorialpro", "Taobao", "Facebook");

function disp(arr_sites: string[]) {
    for (var i = 0; i < arr_sites.length; i++) {
        console.log(arr_sites[i]);
    }
}
disp(sites);

Compiling the above code produces the following JavaScript code:

JavaScript

var sites = new Array("Google", "tutorialpro", "Taobao", "Facebook");
function disp(arr_sites) {
    for (var i = 0; i < arr_sites.length; i++) {
        console.log(arr_sites[i]);
    }
}
disp(sites);

The output is:

Google
tutorialpro
Taobao
Facebook

Returning Arrays from Functions

TypeScript

function disp(): string[] {
    return new Array("Google", "tutorialpro", "Taobao", "Facebook");
}

var sites: string[] = disp();
for (var i in sites) {
    console.log(sites[i]);
}

Compiling the above code produces the following JavaScript code:

JavaScript

function disp() {
    return new Array("Google", "tutorialpro", "Taobao", "Facebook");
}
var sites = disp();
for (var i in sites) {
    console.log(sites[i]);
}

The output is:

Google
tutorialpro
Taobao
Facebook

Array Methods

The following table lists some commonly used array methods: