TypeScript Arrays

Arrays are a special type of object used to store ordered collections of values. In TypeScript, you can define arrays containing elements of specific types, gaining the benefits of type safety.

Creating Arrays

There are two main ways to declare an array:

1. Type + square brackets []: This is the most commonly used way.

   let numbers: number[] = [10, 20, 30, 40];
   let fruits: string[] = ["Apple", "Orange", "Banana"];

2. Generic array type Array<Type>: Using generic syntax.

   let numbers: Array<number> = [10, 20, 30, 40];
   let fruits: Array<string> = ["Apple", "Orange", "Banana"];

Both ways are equivalent; which one to choose depends on personal or team coding style preferences.

Accessing Array Elements

You can access elements in an array through their index (starting from 0).

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

console.log(fruits[0]); // "Apple"
console.log(fruits[1]); // "Orange"

// Modifying elements
fruits[2] = "Mango";
console.log(fruits); // ["Apple", "Orange", "Mango"]

Due to type checking, you cannot assign a value of the wrong type to an array element:

// fruits[0] = 123; // Error: Type 'number' is not assignable to type 'string'.

Array Properties and Common Methods

TypeScript arrays have the same properties and methods as JavaScript arrays.

length Property

Returns the number of elements in the array.

console.log(fruits.length); // 3

Methods that Modify Arrays

• push(...items): Adds one or more elements to the end of the array and returns the new length.

  fruits.push("Pineapple");
  console.log(fruits); // ["Apple", "Orange", "Mango", "Pineapple"]

• pop(): Removes and returns the last element of the array.

  let lastFruit = fruits.pop();
  console.log(lastFruit); // "Pineapple"
  console.log(fruits); // ["Apple", "Orange", "Mango"]

• shift(): Removes and returns the first element of the array.

  let firstFruit = fruits.shift();
  console.log(firstFruit); // "Apple"
  console.log(fruits); // ["Orange", "Mango"]

• unshift(...items): Adds one or more elements to the beginning of the array and returns the new length.

  fruits.unshift("Strawberry", "Grape");
  console.log(fruits); // ["Strawberry", "Grape", "Orange", "Mango"]

• splice(start, deleteCount, ...items): Adds/removes elements at any position.

  // Starting at index 1, delete 2 elements, and insert "Kiwi"
  fruits.splice(1, 2, "Kiwi");
  console.log(fruits); // ["Strawberry", "Kiwi", "Mango"]

Methods for Iterating Arrays

• forEach(callback): Executes a provided function once for each array element.

  fruits.forEach((fruit, index) => {
      console.log(`Index ${index}: ${fruit}`);
  });

• map(callback): Creates a new array with the results of calling a provided function on every element in the array.

  let upperFruits = fruits.map(fruit => fruit.toUpperCase());
  console.log(upperFruits); // ["STRAWBERRY", "KIWI", "MANGO"]

• filter(callback): Creates a new array with all elements that pass the test implemented by the provided function.

  let longFruits = fruits.filter(fruit => fruit.length > 5);
  console.log(longFruits); // ["Strawberry"]

Multi-dimensional Arrays

You can also create multi-dimensional arrays (arrays of arrays).

let matrix: number[][] = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[1][1]); // 5