In this guide I'm going to talk about union types in typescript. Union types are a construct in typescript that allows you to declare multiple potential data types for an object. I've already pasted in the code we used in the last video for creating type aliases so that you can see how this would work for the player array type that we created. What if we wanted the ability not only to store strings but we also wanted the ability to store numbers the way we could do that is by giving a pipe followed by a number.

type PlayerArray = Array<string|number>;
let players : PlayerArray = [“Altuve”, “Corerra”, “Bregman”];
console.log(players);

So whenever we use this pipe this is going to give us the ability to have multiple items so now that we have this now we can actually duplicate this line and will say player numbers of type player array and all make this a set of integers. So now as you can see there are no syntax errors. And if we print this out this will work. Now what happens if I get rid of number here? You can see if I click on player numbers it says Type number array is not assignable to type String Array. So here we're saying that we're trying to assign this number array to this type but player array doesn't allow for that. If we put a number back in you can see that this all works. And if just in case you don't believe me we can run this code. And I’ll do node 009_union_types and you can see it prints out both of the arrays even though there are different data types. So this is how it can work with a type alias.

However I thought it would also be helpful because you're not going to use type aliases a ton. I want to use it with just a regular kind of variable. So here I'm going to just create a set of names so I’m going to say var here names and inside of this I could do a string and I could do a string array, and in order to allow this to be a string or a string array or a regular string. I can type in string put a pipe in between the string array and string declaration here. And as you can see this is perfectly valid typescript. Now I can assign this so I can say names are equal to I can do my name and I'll do my wife's name and that is valid. But now I could also do this. And change it. To my daughter's name. And as you can see this all works. And now if I hit console.log on each one of these. I'm going to go run this code.

Oh it looks like we have one error says union types on line nine Left-Hand of assignment expression cannot be a constant or read only property. Let's see where we have this is on line 9. Where I have name. And that makes perfect sense. I need to actually declare this so if just in case you're wondering what happened there I tried to create a variable without actually declaring it. Here I try to finding it. So that's why I ran into this error so I place the console log right below names the first time and then I re declare names with the string first one with the string array. This one with just a string. And now if I run this this should work.

type PlayerArry = Array<string|number>;
let players : PlayerArray = [“Altuve”, “Corerra”, “Bregman”];
let player_numbers : PlayerArray = [25, 3, 2];
console.log(players);
console.log(player_numbers);

var names : string[]|string;
names = [“Jordan Hudgens”, “ Tiffany Hudgens”];
console.log(names);
names = “Kristine Hudgens”;
console.log(names);

It is interesting that I didn't get in typescript error in sublime. That's not very common but it's good to know. Ok so that round no errors. And now if I run this. Now we have another bug which is just me not fixing my copy and pasting code. Run the code one more time and now this should run and there you go. So you can see that this prints out our top set of arrays and then it prints out our variable names when it's an array of strings and name when it's just a string by itself.

So that is how you can use union types in the typescript programming language.

Resources

• Source code