Arrays in TypeScript

Arrays in TypeScript are used to store multiple values of the same type in a single variable. TypeScript extends JavaScript’s array functionality by adding type annotations, allowing you to work with arrays more safely and predictably. This guide covers how to define, manipulate, and use arrays in TypeScript.

---

Defining Arrays

In TypeScript, you can define arrays using two different syntaxes: the generic array type syntax and the array literal syntax. Here are some examples:

Generic Array Type Syntax

let numbers: Array = [1, 2, 3, 4, 5];
let strings: Array = ["Alice", "Bob", "Charlie"];

Array Literal Syntax

let numbers: number[] = [1, 2, 3, 4, 5];
let strings: string[] = ["Alice", "Bob", "Charlie"];

---

Accessing and Modifying Array Elements

You can access and modify array elements using index notation. Here’s how to work with array elements:

let numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers[0]); // Output: 1

numbers[1] = 10;
console.log(numbers); // Output: [1, 10, 3, 4, 5]

---

Common Array Methods

TypeScript arrays come with a variety of methods for manipulating and interacting with data. Here’s a table of some common array methods:

Method	Description
push()	Adds one or more elements to the end of an array and returns the new length of the array.
pop()	Removes the last element from an array and returns that element.
shift()	Removes the first element from an array and returns that element.
unshift()	Adds one or more elements to the beginning of an array and returns the new length of the array.
concat()	Combines two or more arrays and returns a new array.
slice()	Returns a shallow copy of a portion of an array into a new array object.
splice()	Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
forEach()	Executes a provided function once for each array element.
map()	Creates a new array with the results of calling a provided function on every element in the calling array.
filter()	Creates a new array with all elements that pass the test implemented by the provided function.
reduce()	Executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

---

Examples of Common Array Methods

push()

let numbers: number[] = [1, 2, 3];
numbers.push(4, 5);
console.log(numbers); // Output: [1, 2, 3, 4, 5]

pop()

let numbers: number[] = [1, 2, 3, 4, 5];
let lastElement = numbers.pop();
console.log(lastElement); // Output: 5
console.log(numbers); // Output: [1, 2, 3, 4]

shift()

let numbers: number[] = [1, 2, 3, 4, 5];
let firstElement = numbers.shift();
console.log(firstElement); // Output: 1
console.log(numbers); // Output: [2, 3, 4, 5]

unshift()

let numbers: number[] = [2, 3, 4];
numbers.unshift(1);
console.log(numbers); // Output: [1, 2, 3, 4]

concat()

let array1: number[] = [1, 2, 3];
let array2: number[] = [4, 5, 6];
let combined = array1.concat(array2);
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

slice()

let numbers: number[] = [1, 2, 3, 4, 5];
let sliced = numbers.slice(1, 4);
console.log(sliced); // Output: [2, 3, 4]

splice()

let numbers: number[] = [1, 2, 3, 4, 5];
numbers.splice(2, 2, 6, 7);
console.log(numbers); // Output: [1, 2, 6, 7, 5]

forEach()

let numbers: number[] = [1, 2, 3];
numbers.forEach((number) => {
  console.log(number);
});
// Output:
// 1
// 2
// 3

map()

let numbers: number[] = [1, 2, 3];
let squared = numbers.map((number) => number * number);
console.log(squared); // Output: [1, 4, 9]

filter()

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

reduce()

let numbers: number[] = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // Output: 15

---

Conclusion

Arrays in TypeScript are a powerful and flexible way to manage collections of data. Understanding how to define, access, and manipulate arrays using various methods allows you to write more efficient and effective code. By leveraging TypeScript’s array capabilities, you can handle a wide range of data management tasks with ease.