Multi-dimensional Typed Arrays

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 19 of 73.

TypeScript allows you to create multi-dimensional arrays to handle this kind of structured data with full type safety.

A multi-dimensional array is essentially an array of arrays. The most common example is a 2D array, which you can think of as a grid or matrix. To type a 2D array in TypeScript, you use the Type[][] syntax:

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

let gameBoard: string[][] = [
  ["X", "O", "X"],
  ["O", "X", "O"],
  ["X", "O", "X"]
];

To access elements in a multi-dimensional array, you use multiple sets of square brackets. The first index selects the row, and the second index selects the column within that row:

let matrix: number[][] = [[1, 2], [3, 4]];
console.log(matrix[0][1]); // 2 (first row, second column)
console.log(matrix[1][0]); // 3 (second row, first column)

TypeScript ensures that each inner array contains only elements of the specified type, giving you the same type safety benefits you get with regular arrays, but extended to work with complex grid-like data structures.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a 2D array named gameGrid that can hold numbers and initialize it as a 3x3 matrix with the following values:

First row: 1, 2, 3
Second row: 4, 5, 6
Third row: 7, 8, 9

Create another 2D array named chessBoard that can hold strings and initialize it as a 2x2 matrix with the following values:

First row: "white", "black"
Second row: "black", "white"

Access and print the element at the second row, first column of the gameGrid array.

Access and print the element at the first row, second column of the chessBoard array.

Print each value on a separate line in the order specified above.

Cheat sheet

Multi-dimensional arrays in TypeScript are arrays of arrays, providing type safety for grid-like data structures.

To declare a 2D array, use the Type[][] syntax:

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

let gameBoard: string[][] = [
  ["X", "O", "X"],
  ["O", "X", "O"],
  ["X", "O", "X"]
];

Access elements using multiple square brackets - first index for row, second for column:

let matrix: number[][] = [[1, 2], [3, 4]];
console.log(matrix[0][1]); // 2 (first row, second column)
console.log(matrix[1][0]); // 3 (second row, first column)

Try it yourself

// TODO: Write your code here
// Create the gameGrid 2D array (3x3 matrix with numbers 1-9)

// Create the chessBoard 2D array (2x2 matrix with string values)

// Access and print the element at second row, first column of gameGrid

// Access and print the element at first row, second column of chessBoard

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in Introduction To TypeScript

3Data Structure: Arrays & Tuple

Typed Arrays 'readonly' Modifier for Arrays What is a Tuple?Declaring and Accessing Tuples Destructuring Tuples Readonly TuplesMulti-dimensional Typed Arrays Spread Operator with Arrays Recap: Arrays and Tuples

6Typing Objects and Interfaces

Inline Object Type Annotations Type Aliases for Objects Introduction to Interfaces Interfaces vs. Type Aliases Optional & Readonly Props Extending Interfaces and Types Adding Methods to Interfaces Recap: Defining Object Shapes

9Generics: A First Look

The Problem Generics Solve Creating Generic Identity Func Using a Generic Function Generic Arrays Generic Interfaces Recap: Generic Function Prac