TypeScript Array of Arrays [With Examples]

Recently, during a live webinar, someone asked about the array of arrays in TypeScript. I thought of writing a complete tutorial as this is a very important topic. In this tutorial, I will explain how to use and manipulate arrays of arrays in TypeScript which will be helpful while working with complex data structures. We will see the syntax, usage, and best practices with real-world examples.

Arrays in TypeScript

Arrays in TypeScript are used to store multiple values in a single variable. They can hold elements of a specific type, ensuring type safety. When working with arrays of arrays, also known as multi-dimensional arrays, you can represent complex data structures such as matrices or grids.

Why Use Arrays of Arrays in TypeScript?

Arrays of arrays in TypeScript are useful in various scenarios, such as representing a table of data, a grid for a game, or any situation where data is organized in rows and columns. For instance, consider a seating arrangement in a theater where each row has a list of seats.

Create Arrays of Arrays in TypeScript

To create an array of arrays in TypeScript, you define an array where each element is itself an array. Here’s the syntax:

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

In this example, arrayOfArrays is a 2D array where each sub-array contains numbers.

Read Convert a Map to an Array in TypeScript

TypeScript Array of Arrays Example: Seating Chart

Let’s consider a real-world example of a seating chart in a theater. Each row in the theater can be represented as an array of seat numbers, and the entire seating chart can be represented as an array of rows.

let seatingChart: string[][] = [
  ["A1", "A2", "A3", "A4"],
  ["B1", "B2", "B3", "B4"],
  ["C1", "C2", "C3", "C4"]
];

In this example, seatingChart is a 2D array where each sub-array represents a row of seats.

Access Elements in Arrays of Arrays in TypeScript

To access elements in an array of arrays in TypeScript, you use two sets of square brackets. The first set specifies the row, and the second set specifies the column.

let firstSeatInSecondRow = seatingChart[1][0]; // B1

Here, seatingChart[1][0] accesses the first seat in the second row, which is “B1”.

Iterate Over TypeScript Arrays of Arrays

You can use nested loops to iterate over arrays of arrays in TypeScript. This is useful for performing operations on each element.

Example: Print the Seating Chart

let seatingChart: string[][] = [
    ["A1", "A2", "A3", "A4"],
    ["B1", "B2", "B3", "B4"],
    ["C1", "C2", "C3", "C4"]
  ];
  for (let row of seatingChart) {
    for (let seat of row) {
      console.log(seat);
    }
  }

This code will print each seat in the seating chart.

Here is the exact output in the screenshot below:

TypeScript Array of Arrays

Modify Arrays of Arrays in TypeScript

You can modify elements in an array of arrays by accessing them directly and assigning new values.

Example: Marking a Seat as Reserved

seatingChart[1][2] = "B3 (Reserved)";

In this example, seat “B3” is marked as reserved.

Read Find an Object in a TypeScript Array

Add and Remove Rows and Columns

You can add or remove rows and columns from an array of arrays in TypeScript using standard array methods such as push, pop, shift, and unshift.

Example: Adding a New Row

seatingChart.push(["D1", "D2", "D3", "D4"]);

This adds a new row to the seating chart.

Example: Removing the Last Row

seatingChart.pop();

This removes the last row from the seating chart.

Practical Use Case: Managing a School Timetable

Another practical use case for arrays of arrays in TypeScript is managing a school timetable. Each day of the week can be represented as an array of classes, and the entire week can be represented as an array of days.

let schoolTimetable: string[][] = [
  ["Math", "English", "History"],
  ["Science", "Math", "Physical Education"],
  ["Art", "Math", "Computer Science"]
];

Accessing a Specific Class

To access a specific class, you specify the day and the period like the below TypeScript code.

let firstClassOnWednesday = schoolTimetable[2][0]; // Art

Adding a New Class

You can add a new class to a specific day.

schoolTimetable[1].push("Music");

This adds “Music” to the second day of the timetable.

Removing a Class

You can remove a class from a specific day.

schoolTimetable[0].splice(1, 1); // Removes "English" from the first day

Advanced Techniques: Using TypeScript Interfaces

For more complex data structures, you can use TypeScript interfaces to define the shape of your arrays. This adds an extra layer of type safety and makes your code more readable.

Example: Define a Seating Chart Interface

interface Seat {
  number: string;
  reserved: boolean;
}

let advancedSeatingChart: Seat[][] = [
  [{ number: "A1", reserved: false }, { number: "A2", reserved: true }],
  [{ number: "B1", reserved: false }, { number: "B2", reserved: false }]
];

In this example, each seat is an object with a number and a reserved property.

Access and Modify Seats

You can access and modify seats using the same techniques as before.

advancedSeatingChart[0][1].reserved = false; // Unreserve seat A2

Conclusion

In this tutorial, I explained how to work with an array of arrays in Typescript with some practical examples.