How to declare a Two-dimensional Array in TypeScript

# Declare a Two-dimensional Array in TypeScript

To declare a two-dimensional array, set the type of the array as Type[][].

You can read the type as an array containing arrays of a specific type. Trying to add any other type to the array causes the type checker to error out.

Copied!
// ✅ Two-dimensional array with an inline declaration
const arr: string[][] = [['bobby'], ['hadz']];

The code sample declares a two-dimensional array containing arrays of strings.

The same approach can be used to declare an empty two-dimensional array of a specific type.

Copied!
// ✅ Empty two-dimensional array
const arr: number[][] = [];

If you try to add a value of any other type to the array, you'd get an error.

Copied!
const arr: string[][] = [['bobby'], ['hadz']];

// ⛔️ Error: Type 'number' is not assignable to type 'string'
arr.push([100]);

# Declare a Two-dimensional array using an existing Type or Interface

You can also use an existing type or an interface to declare a two-dimensional array.

Copied!
type Employee = {
  id: number;
  name: string;
};

const arr: Employee[][] = [
  [{ id: 1, name: 'Alice' }],
  [{ id: 2, name: 'Bobby Hadz' }],
];

The code sample declares a two-dimensional array where each nested array contains objects that have an id property of type number and a name property of type string.

The same can be achieved using an interface.

Copied!
interface Employee {
  id: number;
  name: string;
}

const arr: Employee[][] = [
  [{ id: 1, name: 'Alice' }],
  [{ id: 2, name: 'Bobby Hadz' }],
];

# Make sure to explicitly type your two-dimensional arrays

If you don't explicitly type an empty array, TypeScript assumes its type to be any[].

Copied!
// 👇️ const arr: any[]
const arr = [];

TypeScript has no idea what type of values we'll add to the array, so it uses the very broad any type.

You should always explicitly set the type of empty arrays.

Copied!
const arr: string[][] = [
  ['bobby', 'hadz'],
  ['.', 'com'],
];

arr.push(['a', 'b']);

// ⛔️ Error: Type 'boolean' is not assignable to type 'string'.ts(2322)
arr.push([true, false]);

On the other hand, if you initialize the two-dimensional array with values, you can let TypeScript infer its type.

Copied!
// 👇️ const arr: string[][]
const arr = [
  ['hello', 'world'],
  ['one', 'two'],
];

You could also use a type to define a two-dimensional array.

Copied!
type Nested = number[][];

const arr: Nested = [
  [1, 2, 3],
  [4, 5, 6],
];

If you have an object with a property that is a two-dimensional array, you can also use an interface.

Copied!
interface Example {
  nested: number[][];
}

const arr: Example = {
  nested: [
    [1, 2, 3],
    [4, 5, 6],
  ],
};

# Declaring a two-dimensional array containing arrays of N elements

In some cases, you might know that the two-dimensional array will only have N nested arrays of a specific type.

You could use an array of tuples in this scenario.

Copied!
const arr: [[string, string], [string, string]] = [
  ['bobby', 'hadz'],
  ['.', 'com'],
];

The arr variable is an array containing 2 tuples with each tuple storing 2 strings.

# Declaring a read-only two-dimensional array

If you need to declare a readonly two-dimensional array, use the Readonly utility type.

Copied!
const arr: Readonly<string[][]> = [
  ['bobby', 'hadz'],
  ['.', 'com'],
];

// ⛔️ Error: Property 'push' does not exist on type 'readonly string[][]'.ts(2339)
arr.push(['a', 'b']);

We passed the string[][] type to the Readonly utility type, so the array can only be read, but cannot be changed.

There is also a more specific ReadonlyArray utility type that achieves the same result.

Copied!
const arr: ReadonlyArray<string[]> = [
  ['bobby', 'hadz'],
  ['.', 'com'],
];

// ⛔️ Error: Property 'push' does not exist on type 'readonly string[][]'.ts(2339)
arr.push(['a', 'b']);

Notice that we passed string[] instead of string[][] to the ReadonlyArray utility type.