#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