As a TypeScript developer, you should know how to work with TypeScript 2D arrays. In this tutorial, I will explain how to work with 2D arrays in TypeScript with some examples. Here, you will learn initializing, populating, and manipulating 2D arrays in TypeScript with practical examples.
What is a 2D Array in TypeScript?
A 2D array is an array of arrays where each element is itself an array. This structure allows you to store data in a grid or table-like format. In TypeScript, 2D arrays are particularly useful for representing matrices, game boards, and tabular data.
Initialize a 2D Array in TypeScript
To initialize a 2D array in TypeScript, you can use nested arrays. Here’s how you can create a 2D array to store customer names and their corresponding cities:
let customers: string[][] = [
["John Doe", "New York"],
["Jane Smith", "Los Angeles"],
["Michael Johnson", "Chicago"]
];
In this example, the customers
array contains three sub-arrays, each representing a customer and their city.
Check out How to Find an Object in a TypeScript Array?
Populate a 2D Array Dynamically in TypeScript
Sometimes, you may need to populate a 2D array dynamically based on user input or data fetched from an API. Here’s an example of how to add customer data to a 2D array dynamically in TypeScript:
let customers: string[][] = [];
function addCustomer(name: string, city: string) {
customers.push([name, city]);
}
addCustomer("Alice Brown", "Houston");
addCustomer("David Wilson", "Philadelphia");
console.log(customers);
In this example, the addCustomer
function takes a name and a city as arguments and adds them to the customers
array.
Here is the exact output in the screenshot below:

Access Elements in a TypeScript 2D Array
Accessing elements in a 2D array is straightforward. You can use the array indices to retrieve specific elements. Here’s how you can access and print the city of the second customer in the customers
array:
console.log(customers[1][1]); // Outputs: Los Angeles
Check out Calculate the Sum of an Array in TypeScript
Iterate Over a 2D Array in TypeScript
To process or display the contents of a 2D array, you often need to iterate over its elements. You can use nested loops to iterate through each row and column. Here’s an example:
for (let i = 0; i < customers.length; i++) {
for (let j = 0; j < customers[i].length; j++) {
console.log(customers[i][j]);
}
}
This code snippet will print each element in the customers
array.
Modify Elements in a 2D Array in TypeScript
You can modify elements in a 2D array by accessing them via their indices and assigning new values. For instance, to update the city of the first customer to “San Francisco”, you can do the following:
customers[0][1] = "San Francisco";
console.log(customers[0]); // Outputs: ["John Doe", "San Francisco"]
Check out Reverse an Array in TypeScript
TypeScript 2D Arrays Examples
Now, let me show you some examples of using 2D arrays in TypeScript.
Storing Tabular Data
2D arrays are ideal for storing tabular data such as customer records, sales data, or any other structured information. For example, you might have a table of product details:
let products: (string | number)[][] = [
["Product ID", "Product Name", "Price"],
[101, "Laptop", 1200],
[102, "Smartphone", 800],
[103, "Tablet", 600]
];
Representing a Game Board
2D arrays can represent game boards for games like Tic-Tac-Toe or Chess. Here’s an example of a Tic-Tac-Toe board:
let ticTacToe: string[][] = [
["X", "O", "X"],
["O", "X", "O"],
["X", "O", "X"]
];
Matrix Operations
In mathematical computations, 2D arrays are used to represent matrices. You can perform matrix operations such as addition, subtraction, and multiplication using 2D arrays.
Check out Clear an Array in TypeScript While Preserving Its Type
Type Safety with TypeScript 2D Arrays
TypeScript’s type system helps ensure that your 2D arrays are used correctly. You can define the types of the elements in your 2D array to avoid runtime errors. Here’s an example of a 2D array with mixed types:
let mixedArray: (string | number)[][] = [
["Alice", 30],
["Bob", 25]
];
Using Array Methods to Manipulate 2D Arrays
You can use various array methods to manipulate 2D arrays in TypeScript. For example, the map
method can be used to transform each element in a 2D array:
let upperCaseCustomers = customers.map(row => row.map(element => element.toUpperCase()));
console.log(upperCaseCustomers);
This code snippet converts all customer names and cities to uppercase.
Conclusion
I explained how to work with 2D arrays in TypeScript in this tutorial with some examples. You also know how to initialize, populate, access, iterate, and modify 2D arrays in TypeScript.
You may also like:
- Find the Length of an Array in TypeScript
- Remove an Item from an Array in TypeScript
- How to Create a Map from an Array in TypeScript?
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.