How to Use the Union Operator to Create Mixed Type Arrays in TypeScript

TypeScript is a great way to add intention to your JavaScript code and apps. Being able to explicitly define variable types at variable declaration is a great way to avoid type conflicts later in your code. While this is straightforward with primitives types such as numbers and strings, it’s not as clear how to implement this when it comes to objects such as arrays.

In this article we will look at how to create TypeScript arrays, specifically if is possible to create mixed type arrays.

Creating Arrays in TypeScript

TypeScript arrays are great at making sure that you don’t get random data types in your array. To define an array type you can do the following:

The syntax for creating a TypeScript array is to name your variable and then follow it with <element-type>[] to declare the type. This can be used for any primitive JavaScript type as we can see above with numbers, strings and even HTML elements.

You probably noticed that all of these declarations are for a single type. This is helpful for ensuring no types besides the declared type get in our array, but what if we want different type? Is it possible to have a multi type TypeScript array?

How to Use Union Operators

At first I thought that this was impossible. After lengthy reading in the TypeScript docs I had yet to see how you would be able to declare an array type that would allow multiple types. Then I found the union operator.

If you are unfamiliar, the union operator is a tool used to enforce the strictness of TypeScript type checking, while allowing flexibility of multiple white listed types. This is helpful if your input could be an integer or string and you want to be able to assign either to your myNumber variable.

Here is an example of a union operator used on function arguments to allow for string ‘numbers’ before displaying a confirmation or failure message:

Here we allow the function to accept either numbers or strings in the case where someone passes in a ‘1’ instead of a 1. We can then use further type checks to make sure that the value we’re given is valid.

Mixing Types in TypeScript Arrays

Now that we’ve taken a look at single argument type assignments using union operators, let’s look at how to use union operators with arrays. Below I have a code example from a Hangman game I built in TypeScript:

Here I wanted to create an input display to add to the DOM whenever I switched between game stages. I was using TypeScript to set the types of each of the DOM elements I was creating and then putting them in the inputChildren array to allow for easier insertion iteration.

This works, but I am not using TypeScript to the fullest to ensure inputChildren only gets the correct element types. To fix this we can use the union operator to whitelist which types can be accepted to our array. After refactoring my array creation I ended up with this code which explicitly says which types of variable should be allowed in our array:

Much better!

Conclusion

One issue I still have with this code is that there is still a reliance on the order of the arguments and providing the correct number of each type. I am now checking to make sure that we aren’t passing in an incorrect type like a number type or a HTMLImageElement. However, I am not checking that I am passing in one of each of the desired types. This is something I may examine more in a later article. Let me know in the comments your favorite advanced TypeScript methods

Notes

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#unions

https://stackoverflow.com/questions/29382389/defining-array-with-multiple-types-in-typescript

https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel Pericich

Daniel Pericich

Former Big Beer Engineer turned Full Stack Software Engineer