Arrays in TypeScript

Introduction

Arrays are fundamental data structures used to store collections of items. In TypeScript, arrays can hold elements of the same type or a union of types. Understanding how to work with arrays and their types is crucial for building robust and maintainable applications.

In this tutorial, we will explore the basics of working with arrays in TypeScript, including creating arrays, accessing elements, modifying arrays, and using array methods. By the end of this section, you should have a solid understanding of how to effectively use arrays in your TypeScript projects.

Concept

Creating Arrays

You can create an array in TypeScript by specifying the type of its elements within square brackets []. Here are a few ways to declare and initialize arrays:

1. Using Array Type Syntax:

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

2. Using Generic Array Type:

   let names: Array<string> = ['Alice', 'Bob', 'Charlie'];
   

3. Tuple Types:

   Tuples are arrays with a fixed number of elements where the type of each element is known.

   let person: [string, number] = ['John', 25];
   

Accessing Elements

You can access elements in an array using their index. Array indices start at 0.

let fruits: string[] = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // Output: Apple

Modifying Arrays

Arrays in TypeScript are mutable, meaning you can change their content after they are created.

1. Adding Elements:

   let colors: string[] = ['Red', 'Green'];
   colors.push('Blue'); // Adds 'Blue' to the end of the array
   

2. Removing Elements:

   colors.pop(); // Removes the last element ('Blue') from the array
   

3. Updating Elements:

   colors[0] = 'Crimson'; // Updates the first element to 'Crimson'
   

Array Methods

TypeScript provides a variety of built-in methods for working with arrays, such as map, filter, and reduce.

1. Map:

   The map method creates a new array by applying a function to each element in the original array.

   let numbers: number[] = [1, 2, 3, 4];
   let doubledNumbers: number[] = numbers.map(num => num * 2);
   console.log(doubledNumbers); // Output: [2, 4, 6, 8]
   

2. Filter:

   The filter method creates a new array with all elements that pass the test implemented by the provided function.

   let numbers: number[] = [1, 2, 3, 4];
   let evenNumbers: number[] = numbers.filter(num => num % 2 === 0);
   console.log(evenNumbers); // Output: [2, 4]
   

3. Reduce:

   The reduce method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

   let numbers: number[] = [1, 2, 3, 4];
   let sum: number = numbers.reduce((acc, num) => acc + num, 0);
   console.log(sum); // Output: 10
   

Examples

Let's put these concepts into practice with some examples.

Example 1: Creating and Modifying an Array

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

// Adding a new fruit
fruits.push('Date');

// Removing the last fruit
fruits.pop();

console.log(fruits); // Output: ['Apple', 'Banana']

Example 2: Using Array Methods

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

// Doubling each number
let doubledNumbers: number[] = numbers.map(num => num * 2);

// Filtering even numbers
let evenNumbers: number[] = numbers.filter(num => num % 2 === 0);

// Summing all numbers
let sum: number = numbers.reduce((acc, num) => acc + num, 0);

console.log(doubledNumbers); // Output: [2, 4, 6, 8]
console.log(evenNumbers);   // Output: [2, 4]
console.log(sum);           // Output: 10

What's Next?

Now that you have a good understanding of arrays in TypeScript, the next step is to explore objects. Objects are another essential data structure in TypeScript, and learning how to work with them will further enhance your ability to build complex applications.

Stay tuned for our next tutorial on "Objects in TypeScript"!