Arrays and Tuples

Welcome to the next lesson! In this lesson, we’ll explore how to work with arrays and tuples in TypeScript. These structures allow you to store multiple values in an organized way. Let’s dive in!

What Are Arrays?

An array is a collection of items stored in a single variable. In TypeScript, you can specify the type of elements in an array. Example:

Task: Create an array of your favorite numbers and log it to the console.

let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob", "Charlie"];
console.log(numbers);
console.log(names);

Accessing Array Elements

You can access elements in an array using their index. Remember, array indexes start at 0:

Task: Try accessing different elements in an array and log them to the console.

let colors: string[] = ["red", "blue", "green"];
console.log(colors[0]); // Output: "red"
console.log(colors[2]); // Output: "green"

Common Array Methods

TypeScript arrays come with many useful methods. Here are some examples:

• push: Adds an element to the end of the array.
• pop: Removes the last element of the array.
• length: Returns the number of elements in the array.

Example:

Task: Experiment with array methods like push and pop.

let fruits: string[] = ["apple", "banana"];
fruits.push("cherry"); // Add "cherry"
console.log(fruits); // Output: ["apple", "banana", "cherry"]

fruits.pop(); // Remove "cherry"
console.log(fruits); // Output: ["apple", "banana"]

console.log(fruits.length); // Output: 2

What Are Tuples?

A tuple is a fixed-length array where each element can have a different type. Tuples are useful for grouping related data of different types. Example:

Task: Create a tuple to represent a student with a name and age.

let person: [string, number] = ["Alice", 30];
console.log(person[0]); // Output: "Alice"
console.log(person[1]); // Output: 30

Working with Tuples

Just like arrays, tuples support indexing and methods. However, their structure is fixed, and you can’t add extra elements without modifying the tuple type. Example:

Task: Define a tuple for a point in 2D space and log its values.

let coordinates: [number, number] = [10, 20];
console.log(`X: ${coordinates[0]}, Y: ${coordinates[1]}`);

// Attempting to add an extra element will result in an error
// coordinates.push(30); // Error: Tuple type '[number, number]' of fixed length 2

Using Arrays of Tuples

You can create an array of tuples to store multiple related data entries. Example:

Task: Create an array of tuples to store names and ages of your friends.

let students: [string, number][] = [
  ["Alice", 30],
  ["Bob", 25],
  ["Charlie", 35],
];

console.log(students[0]); // Output: ["Alice", 30]
console.log(students[1][1]); // Output: 25

Common Mistakes

Here are some common mistakes when working with arrays and tuples:

• Accessing elements outside the array’s bounds (results in undefined).
• Using the wrong type of data in arrays or tuples (causes errors in TypeScript).
• Attempting to change the structure of a tuple without updating its type.

Tip: Always specify types explicitly to avoid unexpected behavior!

Great Job!

Congratulations! You’ve learned how to use arrays and tuples in TypeScript to store and manage collections of data. These are essential tools for handling structured information in your programs. In the next lesson, we’ll explore union and intersection types to handle more complex scenarios. Let’s keep coding!