So we covered a couple of the core types of knows.
Now let's move on.
And for that I'll rename A.S. here to objects arrays erase imams or whatever you want to name it.
Basically Soledad we still have that file but I'll create a brand new apt.
Yes follows that we have an empty file again in which we can work.
Now in this file I want to dive into not interesting type which you find in typescript and that's the
union type.
Now what's that.
Let's come back to our ad function which we wrote earlier.
I'll copy that and move that into apt yes.
Get rid of that comment here and here on AD.
Let's close basics.
Yes.
So did we get rid of that error here in AD.
I now want to be more flexible regarding what we accept here.
I will also get rid of show resolved and phrase I don't need that.
And the only thing I want to do is I want to calculate a result and return it but I want to be more
flexible regarding the inputs.
Previously we made sure that we only work with numbers.
Now let's say we actually named this combine and it should work with both numbers and strings because
it turns out we can combine both numbers and strings with this plus operator.
The only difference is that in one scenario we get back a number as a result in the average scenario
we get a concatenated string as we actually already saw earlier in this module.
But now I want to allow his behavior because you could have an application where you want of a flexible
combination function that does work with numbers and strings therefore I will all named this input one
year and this input 2 and combine these two now but we will have one problem of course.
Right now we set both parameters to be numbers.
This means dead.
We can call this function as long as we do want to work with numbers let's say down there we're creating
a new constant combined ages and dare I call combine and pass and thirty and twenty six here as ages
in whatever application we're building an idea after a console log combined ages.
Well it shouldn't be too surprising that if we now compiled this file here and we then reload this page
we get 56.
So this works we get this number.
But of course we have a problem if we try to create a string here combined names for example if I tried
to combine Max and Anna here then well we immediately get an area that Max is not a sizable to type
number because it is of course is a string.
Now of course we could change this to accept strings instead of numbers.
But now the first function call would fail.
And that is where union types can help us if we have some place in our application be that a parameter
of a function or a constant or a variable we're using somewhere where we accept two different kinds
of values.
Well then a union type can help us to tell typescript that we are fine with either a number or a string
we use number and then the pipe symbol here and then the other type we all accept.
And you can have more than two types you can accept as many types here as you need.
So here I only need two though and that stage for the type assignment.
I'll go with number or string.
Now I get an error here that the plus operator cannot be applied to type string or number and string
or no that's actually not entirely correct.
This should work because we can use the plus operator with both numbers and with strings but typescript
only sees that we have a union type here and it doesn't analyze what's in the union type.
It just sees OK you're expecting multiple types maybe that includes types where you can't use the plus
operator.
Hence I will complain here.
Now thankfully we can work around that issue though we can add our runtime type check here and see if
input one of the type of that is equal to number and if the type of input two is equal to number
and then move this calculation in there.
Now just one improvement.
Let's create result as a variable outside of that if check because of blocks scoping so that this is
a variable saleable in the entire function.
And then just assign a new value in there.
So now here we check if we do have two numbers and therefore a typescript no listed in here.
Input 1 and input 2 both will be numbers.
Now let's add a else check here and there we consider assault equal to input one dot to string explicitly
converting this to a string and input to two string.
And this will then all be fine for TypeScript and JavaScript because we can concatenate two strings.
So now we have almost the same calculation but we may clear that here will always work with numbers
here will always work with strings and then we return the result.
And now with that if we console lock the combined names down there and we compiled his file we'll see
that once we revisit our page we've got the combined numbers there which were simply added together
and hence we get a number as a result and to combine names here.
So this is how we can use union types to be more flexible regarding what we do in a function for example
or anywhere else in our code.
This extra runtime type check will not always be required when you work with union types but often will
be because with union types you can be more flexible in for example the parameters you accept but then
you might have different logic in your function based on which exact type you are getting.
So did your function is able to work with multiple types of values but that a den does slightly different
things depending on the type you're getting.
So off you might need such a runtime check when working with union types but you will not always need
it.
You will certainly also encounter situations in types good programs where you can use a union type without
a runtime type check.
It really depends on the logic your writing.