How to Build Multi Type Multidimensional Arrays in TypeScript

Photo by Markus Spiske on Unsplash

A multidimensional array sounds a lot more complicated than it really is. While a normal array consists of a list of numbers or other objects, a multidimensional array consists of a list of arrays. A more broad view is that an array is a list of values, sometimes primitives such as strings or numbers, but the values may also be other arrays. This composite data structure is how we are able to create matrices and model 2+ dimensional data.

The application of a multidimensional array can be as complex as modeling three dimensional objects or as simple as storing readable strings and values for populating a dropdown HTML element. This is straightforward in practice, but how do we implement this in TypeScript?

Simple Multidimensional TypeScript Arrays

One of the most basic multidimensional arrays we can create is one for storing matrices. Say we have the following structure we would like to display in TypeScript:

Figure 1. A basic 3x3 number matrix.

This is a three by three matrix which we would like to represent as a 3x3 array. Without TypeScript types we can express this data structure as the following:

Figure 2. Our threeByThree JavaScript variable for an array of number arrays.

Here we have three arrays with numbers nested inside a parent array. This gives us a multidimensional array of numbers. It works, but without typing it is not clear why this is structured this way, or even that it needs to be this way. To fix this we can give it a little TypeScript facelift:

Figure 3. Specifying any count of number variables in a TypeScript array of nested arrays.

We’re getting better as now it’s clear that our threeByThree variable needs to have number arrays nested in a parent array. However, we’re still missing a constraint to ensure that each child array has three number elements. We can fix that as the following:

Figure 4. Specifying the exact number of numbers in each array of our multidimensional array.

Now there’s no getting around how our threeByThree variable can be built. It has to be a two dimensional array of arrays where each array has three number values. And if a user comes and adds a fourth element to one of the arrays:

Figure 5. An error message for incorrect number of child array arguments.

We get this error enforcing that the array must have the specified number of elements and they all must be numbers!

Multi Type Multidimensional TypeScript Arrays

It’s not too hard to build multidimensional arrays when all the elements are of the same type. But how do we go about building multidimensional arrays when we have mixed types for our array elements?

Before we dive into this, what kind of applications could we use this for? A common one is to create a set of [“readableString”, valueId] pairs for building dropdown menus. Another use I have found is building string-number sets that allow you to filter the strings you include in your collection based on if the number is within a range. For our example let’s use the dropdown scenario:

Figure 6. Our cartItems array used to generate <option> HTML tags.

Above we see we have cartItems, which is an array of arrays where we display item colors and their ids. We can feed this into a map function to output a set of HTML option tags, but only if the array is formatted correctly. To ensure correct formatting let’s add some TypeScript!

To do this we will again give cartItems a type of a double array, but this time we can’t specify just a number as we have both string and number values in our arrays. In order to represent these more complex members we will do the following:

Figure 7. TypeScript cartItems declaration for enforcing arrays with a string and number.

Just like when we specified that we would have three numbers per array, we can specify our complex member arrays by placing string and number within the inner array type declaration. Here TypeScript will know to check for a string and number value before allowing the variable to be valid. We’re all set!

Just a quick heads up for typing with arrays. Types put outside the array brackets serve as count wildcards and allow any number of elements within them. Types put inside the brackets will enforce the quantity of that type declaration that are placed within the array.

Final Thoughts

The applications for multidimensional arrays is endless. Because the combination of structures that compose multidimensional arrays can be complex, it is important to define acceptable values using TypeScript. I hope that this article was helpful in your understanding of both simple and more complex multidimensional array typing and definitions!

Notes

https://stackoverflow.com/questions/30144580/typescript-multidimensional-array-initialization

https://www.tutorialspoint.com/typescript/typescript_multi_dimensional_arrays.htm

https://dpericich.medium.com/how-to-use-the-union-operator-to-create-mixed-type-arrays-in-typescript-1c208b48c139

https://www.codecademy.com/learn/learn-typescript/modules/learn-typescript-complex-types/cheatsheet