Borislav Hadzhiev
Fri Feb 25 2022·3 min read
Photo by Brooke Cagle
To declare a two-dimensional array, set the type of the array as Type[][]
,
e.g. const arr: string[][] = [['one'], ['two']]
. You can read the type as an
array containing arrays of specific type. Trying to add any other type to the
array would cause the type checker to error out.
// ✅ Two-dimensional array with inline declaration const arr: string[][] = [['one'], ['two']]; // ✅ Empty two-dimensional array const arr2: number[][] = []; // ✅ Using a type type Employee = { id: number; name: string; }; const arr3: Employee[][] = [ [{ id: 1, name: 'Alice' }], [{ id: 2, name: 'Bob' }], ];
The first example shows how to declare a two-dimensional array containing string arrays.
string[]
is an array of strings, so you can read string[][]
as an array containing string arrays.If you try to add a value of any other type to the array, you'd get an error.
const arr: string[][] = [['one'], ['two']]; // ⛔️ Error: Type 'number' is not assignable // to type 'string'.ts(2322) arr.push([100]);
This approach is very useful when you have to initialize the two-dimensional
array as empty. If you don't explicitly type an empty array, TypeScript assumes
its type to be any[]
.
// 👇️ 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.
any
type to the array, but we'd get no help from the type checker.You should always explicitly set the type of empty arrays.
const arr: string[][] = [ ['hello', 'world'], ['one', 'two'], ]; 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.
// 👇️ const arr: string[][] const arr = [ ['hello', 'world'], ['one', 'two'], ];
You could also use a type to define a two-dimensional array.
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.
interface Example { nested: number[][]; } const arr: Example = { nested: [ [1, 2, 3], [4, 5, 6], ], };
In some cases, you might know that the two-dimensional array will only have N nested arrays of specific type. You could use an array of tuples in this scenario.
const arr: [[string, string], [string, string]] = [ ['hello', 'world'], ['one', 'two'], ];
The arr
variable we declared above is an array containing 2 tuples with each
tuple storing 2 strings.
If you need to declare a readonly
two-dimensional array, use the
Readonly
utility type.
const arr: Readonly<string[][]> = [ ['hello', 'world'], ['one', 'two'], ]; // ⛔️ 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.
const arr: ReadonlyArray<string[]> = [ ['hello', 'world'], ['one', 'two'], ]; // ⛔️ 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.