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:

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.
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.