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
