- So far we haven't really covered that much of TypeScript.
We already know enough TypeScript to do quite a bit.
But if you want to handle any more complex types
or some more specific types,
you're gonna need to know different ways to
modify your types by using your existing types.
That's what this entire section
of the course is going to be all about.
Now we already talked about one type of modifier
which is like an optional parameter inside
of an object type and that actually leads directly
into the next modifier I want to talk about
which is a union modifier.
Union modifier is essentially taking multiple types
and saying that something is one
of multiple different things.
Take for example an id.
Let's just say I have an ID and it's equal to seven,
but let's say that I want this ID to either be a
string or a number just because the way my system is built
this can be an ID of a number or a string,
but right now I have no way to type that
because if I look at this,
let's just make it a let
so we can actually see the type here.
And notice when I hover over this
obviously it says it's a string
and if I change it to a number,
it says it as a number
and it doesn't let me change between them.
For example, I can't redefine this as a string.
That's obviously gonna throw an error for me.
So instead what I can do is I can define a specific type
for this ID and that type is going to be string
and then I use the pipe symbol,
which is that vertical bar
and then I can say or number.
That's essentially what this is like.
And if you know the OR syntax in JavaScript
which is just two of these,
essentially it's the exact same type
of idea where it's saying this or this
or we're just using one pipe symbol instead of two.
Now when I hover over my id
you can see it's either a string or a number.
And if I say my ID is equal to the string of seven
now you can see I no longer get any errors.
But if I try to set it to something like a Boolean
I'm obviously gonna get an error
cuz that's not within my union.
I can add it to my union if I wanted.
For example, I can just come in here
and I can add onto a Boolean
and now you can see it can be
one of those three different types.
This is actually something you should already
be familiar with a little bit because if we go
back to that person type example,
here we go,
and we had that is programmer field in here
and we made it optional.
So we can say is programmer is an optional Boolean.
When we hover over this to see the type,
you'll notice that the type of this
is just Boolean or undefined.
Essentially when you put this question mark
it's just doing a union.
I can actually just write this as this right here.
And these both mean the exact same thing.
You can see when I hover, I get the exact same output.
So that question mark syntax is really just a shortcut
for doing a union between undefined and a Boolean
or whatever other type you wanted.
So let's back this up to where we had it before.
And let's say I wanted to add an ID inside of here.
Again, I could just say this is a number
or a string just like that.
And now that's a kind of a use case of where
you'd want to have these union types.
So it's really great if you want something
to be one of multiple different things.
And another case where it's really useful is
if you have like a status for example.
So let's say that we change this to a to-do
and the to-do can either be complete,
incomplete or like draft.
So we'll say status.
And normally you would just say string
and I could just say const to-do equals,
let's get rid of all these other properties.
We'll just give it a name.
There we go.
And I can say that the name is going to be laundry
and our status is going to be complete.
There we go.
And let's say that I have three different statuses
complete, incomplete, and draft.
Let's say I've made a typo.
I put like a D at the end of complete.
You'll notice I'm not getting any errors
or warnings because I typed this as a string.
It can be any string at all.
But if I want it to be just those three different types
well I can put that in a union.
I can say it's either going to be complete,
it's going to be incomplete,
or it's going to be draft.
And now if I give that a quick save
and I make sure I type this to-do as a type of to-do
you're gonna notice we get an error on this status.
If I change it back here to where it was just a string
you notice no errors at all, everything's working fine,
but when I give it this specific union here
now when I hover you can see it says type completed is not
assignable to the type complete or incomplete or draft.
Did you mean to write complete?
And you know what, that's exactly what I meant.
Let's change this and now you can see
that I no longer get the error.
And the really great thing is I actually get auto complete.
You can see it says complete draft or incomplete.
So it gives you my exact three options right here
which is really cool.
You can even go further by making a union,
a union of multiple different types.
For example, let's say I have a to-do.
Let's just come in here with a person type
which is just a name and an age.
Well, I could create another type
if I really wanted that is a union of these two.
For example, I could say type to-do person equals
and I'm just gonna take the to-do type
and union it with the person type.
Now you can see when I hover over this
that this to-do person is either a to-do or a person.
And if I wanted, I could write out my type for my person
here in line so I could do it like this,
that will also work just fine.
Both of these are gonna work.
And the really nice thing about this is it's a great way
of being able to combine together different things and this
or syntax right here is really easy to use with types.
Now, quickly talking about the difference
between interfaces and types,
I cannot do a union with an interface.
Like I can't say that this is going to be an interface
called to do person which is a union of these two things.
It just doesn't work.
There's no way to do that.
If you wanna do a union of multiple different things
you need to use a type.
Now these sections up here for the person and the to-do,
those could be written as interfaces,
but my union would specifically have to be written as a type
which is just another reason why I like to use
types instead of interfaces cuz I can't do certain things
with interfaces that I can do with types.