TypeScript Array Tutorial with Examples

This tutorial shows how to work with Arrays in Typescript with examples.

Note: To run or execute source code examples of this tutorial, follow How to Run the TypeScript Code guide.

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

1. Using square brackets. This method is similar to how you would declare arrays in JavaScript.

//  Using square brackets
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
console.log(programmingLangs); // [ 'C', 'C++', 'Java', 'JavaScript' ]

2. Using a generic array type, Array.

// Using a generic array type, Array<elementType>.
let programmingLangs: Array<string> = ['C', 'C++', 'Java', 'JavaScript'];
console.log(programmingLangs); // [ 'C', 'C++', 'Java', 'JavaScript' ]

Both methods produce the same output.

Learn more about TypeScript at TypeScript Tutorial with Examples.

Table of contents

1. Create an Array
2. Add elements to an array
3. Multi-Type Array
4. Access Array Elements
5. Iterate Through Array
6. Clone Array
7. Merge Arrays

1. Creating an Array

Example: Array inline declaration and initialization

// array inline declaration and initialization
//  Using square brackets
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
console.log(programmingLangs);
// Using a generic array type, Array<elementType>.
let programmingLangs1: Array<string> = ['C', 'C++', 'Java', 'JavaScript'];
console.log(programmingLangs1);

Example: Array declaration and initialization in separate lines

let programmingLangs : string[];
programmingLangs = ['C', 'C++', 'Java', 'JavaScript'];

let programmingLangs: Array<string>;
programmingLangs = ['C', 'C++', 'Java', 'JavaScript'];

2. Adding elements to an Array

To add more elements to an array, use the push() method.

Example: Add an element to an array

// Add elements to array example
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
programmingLangs.push('Python');
programmingLangs.push('Kotlin');

3. Multi-Type Array

An array in TypeScript can contain elements of different data types using a generic array type syntax.

Example: Multi Type Array

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

4. Access Array Elements

The array elements can be accessed using the index of an element e.g. ArrayName[index]. The array index starts from zero, so the index of the first element is zero, the index of the second element is one and so on.

Example: Access Array Elements

// Access Array Elements
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
console.log(programmingLangs[0]); // C
console.log(programmingLangs[1]); // C++
console.log(programmingLangs[2]); // Java
console.log(programmingLangs[3]); // JavaScript
console.log(programmingLangs[4]); // undefined

// Access Array Elements using Loop
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
programmingLangs.forEach(element => {
    console.log(element);
});

// Access Array Elements using Loop
for(let element of programmingLangs){
    console.log(element);
}

Iterate or Loop Through Array

Example: Using forEach() method

// Iterate Through Array
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];

// using forEach() method
programmingLangs.forEach(element => {
    console.log(element);
});

Example: Using “for…of” loop

// Using “for…of” loop
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
for(let element of programmingLangs){
    console.log(element);
}

Example: Using traditional for loop

// Using traditional for loop 
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
for (var i = 0; i < programmingLangs.length; i++) {
    console.log(programmingLangs[i]);    
}

5. Clone Array

Use spread operator to clone array. It’s the easiest and recommended way.

Example: Clone Array Example

let numbers :number[] = [10, 20, 30, 40,50];   
 
let clonedNumbers = [...numbers];
 
console.log(clonedNumbers);     // [ 10, 20, 30, 40, 50 ]
 
numbers.push( 60 );
numbers.push( 70 );
 
console.log(numbers);       // [ 10, 20, 30, 40, 50, 60, 70 ]
console.log(clonedNumbers);     // [ 10, 20, 30, 40, 50 ]

Merge Arrays

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

Example: Merge two array

// Merge Arrays
let numbers1 :number[] = [10, 20, 30, 40,50];   
let numbers2 :number[] = [60, 70, 80, 90];  
let mergedNumbers = [...numbers1, ...numbers2];
console.log(mergedNumbers); // [ 10, 20, 30, 40, 50, 60, 70, 80, 90 ]

Conclusion

In this tutorial, we have seen how to create an array, how to add elements, how to access an array, how to loop an array, how to copy an array and how to merge an array with examples.

Learn more about TypeScript at TypeScript Tutorial with Examples.