- In this video, I'm gonna be talking
all about how you can assign types in TypeScript
which we've already kind of looked at a little bit.
And then also the most important part of TypeScript
which is type inference
which is how you can do pretty much everything in TypeScript
without actually knowing that much TypeScript.
The very first thing I wanna talk about
is how you actually assign a type to a variable.
We can just come in here, we can create a variable a,
and let's just say, we're gonna set it to 4.
And we want to actually type this variable a as a number
so that TypeScript knows this as a number
and we can only do things related to numbers with it.
Well, the way that you do that in TypeScript
to type a variable
is what you do is you just put a colon after the variable,
put a space, and then put whatever the type is going to be.
Now you will notice when you type out number,
there are two different ways you can do it.
One is going to be lowercase number
and one is going to be uppercase Number.
It's the same thing with string, Boolean,
and a bunch of other different primitive types
in JavaScript.
The important thing to note is when you're doing things
like string, Boolean, and numbers,
you always want to use the lowercase version
instead of the uppercase version.
That's because of the way that JavaScript
is actually written.
Because what you can do is I can say,
"I want to create a new Number."
Like this, and that will give you a type of uppercase number
or you can just use a normal number like 4 or 3,
and that's going to be a lowercase number.
Now it's not important
that you know the difference between the two
because it's super mynute
and it's like really hardcore JavaScript stuff
that determines those differences.
But when you're defining types in TypeScript,
just make sure to always use
that lowercase primitive version
instead of the uppercase version.
Now, if we say this and we try to do something on a,
you can see we have all the different methods
that are available on our numbers.
For example, toFixed, toExponent, toString, and so on.
If we hover over this a variable,
you can see it has a type of number.
So we at least know that this is working.
You can even see that the way that things are typed
when you actually hover over them,
is that same colon syntax that you can see right here.
Now if I were to create, for example, a string instead.
So if I wanted this to be a string
and then I'll notice I get an error
because I have it explicitly typed as a number
but it is a string.
So I'm gonna come in here,
I'm gonna say that this is now a string.
Also something that's really nice about TypeScript.
If I had to try to assign this to a number,
I'm gonna get an error
because I can't assign this to a number
since I explicitly declared that it is a string.
So this is just some of the power right here
behind TypeScript.
Whenever you type something as a specific type,
it assumes it's always going to be that type.
So you can never redefine it as a different type.
It's just going to be, like, "Okay, this is a string.
You're trying to assign a number.
That's obviously not going to work."
That's what allows you to get that really good auto-complete
and the really good error protection.
Now I also talked about how you can have type inference
which is the really powerful part of TypeScript.
And what I can do is I can just remove
where this says string and the colon right here
and my code is going to work exactly the same.
When I hover over a,
you can see it has a type here of string.
And you also see down here that I'm still getting an error
'cause I'm trying to assign a number to a type of string.
And this is what I really love about TypeScript
compared to pretty much any other type language out there
is that TypeScript is smart enough to just look at your code
and know what the different types of things are going to be.
So you don't have to write actually that very many types
inside of your JavaScript code.
Most of the time,
the only time you actually need to type something
is when you are defining a variable
that has no value at all.
So for example here, this doesn't have any type.
And if I wanted to give it a type,
I could say that it is going to be a string.
That's one scenario.
Or when you're defining functions,
that's another scenario where you have to give things types.
But in almost all other scenarios,
you can just infer the type of things
based on what you assign them to
which is something I really love.
Now, one thing that you may have noticed
if you're following along with this,
is that actually if I just come in here,
we're just gonna say,
"That this is going to be equal to the value of 4."
We'll get rid of this down here.
So it's going to be a number.
You can see when I hover, it's a number.
If I were to use const here instead of let,
you'll actually see that the type a here
is the explicit value of 4.
Now the reason for this is because of something called
a literal type in TypeScript.
A literal type just says that this variable
or whatever you're typing,
can only be literally one thing
and that is the value of 4.
That's because this is a constant variable
set to a value of 4.
This can never change.
It's impossible for me to say, like a = 3,
that fails in JavaScript not just in TypeScript.
But it's going to fail in TypeScript as well
because I'm trying to assign 3 to a value
that is supposed to be 4.
So when you use const to define a variable
and you give it like a static primitive value
like a number or a string or something like that,
it's going to show up as an actual literal type
instead of the more generic number type
because this can only have the type of 4.
Now this is different if you use an object, for example.
And that's because even if you use const,
you can still change the properties of an object
that's just a built-in JavaScript feature,
same thing with arrays,
you don't have to worry about that in those cases.
But if you're using primitive values,
you will run into that if you use const.
Which is perfectly okay.
If you know that this is a constant variable of the value 4
that never changes,
you should use constant to find that,
and let this inference actually say
that this is a literal type of 4.
You can also explicitly say
something is going to be a literal type.
So I can come in here
and I can actually type this as the value of 4 manually,
and you can see I get the exact same typing definition here.
But the point of doing this is pretty much non-existent.
You would almost never write out your types like this.
Instead, you would just use const
and let TypeScript do that inference for you.
Now the final kind of basic type assignment
that I wanna cover in this video
is going to be null versus undefined.
And if you're used to JavaScript,
you know that null and undefined
are technically different from one another
and it's the exact same thing in TypeScript.
Null and undefined have their own types
and they work just like that.
So if I were to set this to null for example,
you can see that a has a type of explicitly null
because I assigned it to null as the type.
And if I were to try to come in here
and set this to undefined,
I'm going to get an error
because null and undefined are different from each other
so I cannot redefine it to undefined.
I can make this a little bit more explicit
by coming in here,
manually typing this as null,
and now you can see I'm getting a TypeScript error
'cause undefined is not assignable to null.
Same exact thing, if I set this to undefined
and I make sure I type this as undefined here,
you'll notice that if I try to set it to null,
I'm going to get an error.
Now, one thing that you will notice
if I leave off this type inference,
TypeScript doesn't do any type inference
when you set something to undefined or null
when it's a let variable
'cause it just assumes this variable doesn't exist.
It could literally be anything at all.
It's essentially the same thing
as if I left it off like this,
a is still undefined.
So if you don't give it an actual type
and you also don't define a default value,
TypeScript doesn't know what what type to give it,
so it just says it can be any type at all.
So mostly, if you're gonna be dealing
with something that must be null or undefined,
you're probably going to explicitly type it
or most likely, you're just going to use
a const variable like this.
And these differences between null and undefined
are actually a really common cause of bugs
inside a TypeScript programs
'cause something may be null
and you're only checking if it's undefined or vice versa.
So just make sure you're aware of that
as you're writing your TypeScript code.
The differences between null and undefined
and if a variable is one versus the other,
that's one thing to keep in mind.
That you don't really have to worry about as much
when you're in JavaScript.