Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed TypeScript Basics!
You have completed TypeScript Basics!
Preview
Let's take a look at the any, void, null, and undefined types, as well as how to use ts-node to run our TypeScript file directly in node.js without compiling it to JavaScript first.
The shorthand age is that same as age: age.
Note
All shortcuts mentioned in this course are for macOS operating systems. For Microsoft Windows systems, please use Control (Ctrl) instead of Command (Cmd), and use Alt instead of Option.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
0:00
In our last video, we went through
using the basics of the array and
0:01
tuple types in TypeScript.
0:05
In this video, we're going to
go through using the any, void,
0:07
null, and undefined types.
0:12
This may sound like a lot of types
to go through in one video, but
0:14
they're all pretty simple to understand.
0:18
Let's actually get started
right away with some code.
0:21
To keep things simple,
we'll continue working from this file.
0:25
So this is the basics-types.ts file.
0:29
We created this file
in the previous video.
0:33
But if you're just starting the course
with this video, and don't have
0:37
this existing file, you can go ahead and
create a new file and follow what I do.
0:42
We won't actually be using
the code from the previous video,
0:48
in this video, but it's a lot quicker
to stay in this file than create
0:52
a new one in a different folder.
0:57
If these red squiggly lines up here
are bugging you like they're bugging me,
0:59
let's fix that by changing
this number type to a string.
1:05
And what we can do is make some
space between the code above and
1:08
this code down here.
1:12
I'm actually going to write a comment
here with a few hyphens, and
1:14
we'll start our code down here.
1:18
First, let's talk about the any type.
1:20
We'll create a variable and
call it justLikeJS.
1:23
We'll give this a type annotation of any,
and
1:29
we'll make some space below line
21 by hitting Enter a few times.
1:33
Now, the any type is my least
favorite type in TypeScript.
1:39
This is the type annotation you use
if you don't want to benefit from
1:44
TypeScript's type checking.
1:48
You can assign this variable to any type,
string, Boolean, number,
1:50
anything you want, and
TypeScript will not give you an error.
1:55
I'll show you now.
1:59
Let's copy this variable here.
2:01
And I'll give it a value,
that's a number, say 2.
2:04
And there are no errors from TypeScript.
2:07
We'll duplicate line 23 by
pressing Option > Shift > and
2:10
the down arrow key, and
we'll give it a string of 2 as well.
2:15
And once again,
there are no errors from TypeScript.
2:19
If you gave every variable
in your code the any type,
2:23
then this would be the same
as writing regular JavaScript
2:27
because no type checking
will be taking place.
2:32
However, this can be useful if you're
not very confident with TypeScript and
2:36
you're writing some complex logic.
2:42
You can give all your variables the any
type, focus on getting the code correct,
2:44
and then go back into the code
to give it the correct types.
2:50
The any type is also
useful if you're moving
2:54
a JavaScript code base into TypeScript.
2:58
You can first give your variables a type
of any, check the code is working,
3:02
and then slowly go through your
code to give it the correct types.
3:08
But in general, if you're writing a new
TypeScript project from scratch, there's
3:13
not really a need to use the any type,
and I would personally avoid using it.
3:19
Let's move on to the void type.
3:24
The void type sounds pretty mysterious.
3:27
It's a word that isn't really used in
JavaScript, but it's not too complex.
3:32
This type is generally used for
functions that don't return anything.
3:38
We'll talk more about functions in
TypeScript later on in this course.
3:43
But for now,
let's just focus on the void data type.
3:48
We're going to create a function
called printToTheConsole().
3:52
And this function was simply
console.log( 'some text' ).
4:01
As you can see, this printToTheConsole
function does not return anything.
4:08
But it makes sense to have a return
type so that someone who's looking
4:13
at this code will know that it's
not supposed to return anything.
4:19
Let's give it the void type
by adding a colon after
4:23
the closing parenthesis of
the function and writing void.
4:28
Now, as I mentioned before,
4:34
we'll talk more about functions in
TypeScript later on in the course.
4:36
But what I've just done is given
this function a return type of void.
4:41
So if I try to return a number,
TypeScript will give me an error.
4:46
Same thing if I try to return a string,
I would also get an error from
4:52
TypeScript because this function is
not supposed to return anything.
4:57
Now, you can also give the void
type annotation to a variable.
5:03
But in my opinion, it doesn't really make
sense to give the void type to variable.
5:09
I'll show you how to do it nevertheless.
5:15
We're going to create a variable called
test, and we'll give that a type of void.
5:17
Since a void type means that
nothing should be returned,
5:26
it's a bit odd adding it to a variable,
because variables have a value.
5:30
So we can't really give this test
variable a value of a number,
5:35
Because it's returning something.
5:41
We can't even give a string of two or
5:43
a Boolean because all these
are values that return something.
5:47
We can only give test a value
of undefined, which again,
5:52
doesn't really make much sense because
TypeScript already has an undefined type.
5:58
So in general, the void type
doesn't really make sense for
6:06
variables, but makes more sense for
function return types.
6:10
Now that we've touched upon the undefined
type, let's talk about it in more detail.
6:15
In fact,
6:21
we're going to talk about it with the null
type because they're both kind of similar.
6:22
The null and
undefined types are useful for
6:28
bits of data that you
don't know exist yet.
6:31
Imagine data coming from an external
source, like an API, and you're not really
6:35
sure if the data that you're calling is
going to come back with a value or not.
6:42
But first, let's talk about the difference
between null and undefined.
6:47
I'm sure you already know this,
but in case you don't,
6:53
I'll give a quick definition of both.
6:58
Undefined can be used for
something that hasn't been declared yet.
7:01
So, if you look at our
justLikeJS variable on line 21,
7:06
at that point in the code,
it doesn't have a value,
7:11
therefore, it's undefined.
7:16
Similarly, if we were to
scroll up in this file and
7:19
look at the variable on
line 1 called numbers,
7:24
at that point in the code,
numbers is undefined.
7:28
Even though it has a type
of a number array,
7:32
it doesn't have a value assigned to it,
so it's undefined.
7:36
Let's scroll back down in this file.
7:42
And if we compare that to null,
7:44
null is different from undefined
because null is a value,
7:47
that means there is no value, and
this will be set by the programmer.
7:53
Whereas undefined is the state
that a variable is in if it
8:00
hasn't been assigned a value.
8:05
Null is a value itself that
a programmer will assign to
8:07
a variable if there is no value.
8:12
That sounds really weird, so I'll try and
make more sense of it with an example.
8:15
Imagine if you typed something
into a Google search box, and
8:21
you got a response saying, there are no
results for what you've just searched.
8:25
I'm not completely sure how
Google works in the background.
8:31
But let's just say that for
Google to print that message to you,
8:35
their API or their server will
return a null value to the frontend.
8:41
And the frontend would say,
okay, if I receive a null,
8:47
then tell the user there are no
results for what they searched.
8:51
Null is a value that would be set by
the programmer to say there are no values,
8:56
there is no data for
what the user has searched.
9:03
Or the server has gone into the database,
looked for some data,
9:07
has not been able to find that data,
and has returned a null.
9:13
I hope that makes the difference
between null and undefined more clear.
9:18
Anyway, let's actually use
these two types in TypeScript.
9:23
We're going to create
a variable called personData.
9:29
We're going to make this
an object with a property of name,
9:36
which will have a value called Tim, and
age, which we'll leave blank for now.
9:41
Now, on a new line, we're going to
create a variable called personAge.
9:47
And we'll give this
a data type of undefined.
9:55
Let's create a variable
called age above personData.
10:01
We're not going to give this a type for
now,
10:06
but we want the value of this
age variable on line 33 to be
10:10
the same value as the personData
age property on line 36.
10:15
So, we're going to get rid
of these quotation marks.
10:21
Now, let's go down here and
10:25
assign personAge to personData.age.
10:29
Okay, at the moment,
there are no errors from TypeScript
10:34
because age on line 33 is currently
undefined, and therefore,
10:39
the undefined type of personAge
on line 39 is correct.
10:45
However, if we imagine we're getting data
from an external source like an API,
10:50
sometimes we'll have a value and
sometimes we won't.
10:56
So imagine in this case,
we've actually got a value from the API,
11:00
and the value is, say 26.
11:06
Let's give that value to our
age variable on line 33.
11:08
Okay, now, on line 40,
we have an error because the age
11:14
variable is no longer undefined,
it's actually number.
11:20
To fix this, we can change the type
on line 39 to number pipe undefined.
11:25
This is called a union type, and
11:35
we're going to talk more about
these later on in the course.
11:37
But for now, you should know that
personAge can either be a number or
11:42
undefined.
11:48
This is actually pretty cool,
but in an actual API,
11:49
you either get back the value,
in this case number, which is 26,
11:54
or null, if no data was found. So
12:01
the value should actually
never be undefined.
12:05
If we imagine we try to fetch
the age value from a database and
12:09
it can't find any,
it will give us a null value back.
12:14
So let's change 26 on line 33 to null.
12:18
And as you can see,
12:25
TypeScript gives an error because we
don't have the null type on line 39.
12:26
Let's replace undefined with null.
12:31
And just like that,
our error has gone away.
12:35
So if we change the age
variable on line 33 from
12:39
null to a number, say 20,
this also satisfies
12:44
the type on line 39 so
we don't get an error.
12:49
Now, you probably won't use the null and
undefined types that much.
12:54
In fact, you'll use them a lot less than
the other basic data types in TypeScript.
13:00
But it's good to know that they exist so
13:06
that if you do need to use them,
you'll know what to do.
13:10
I understand that null and
undefined types are a bit confusing.
13:15
And if you're still not sure exactly
when and how to use them, don't worry.
13:20
We're going to talk a bit
more about the undefined type
13:24
specifically when it comes to optional
types later on in this course.
13:28
But for now, we're going to move on and
talk about object types.
13:33
These are a tiny bit more complicated
than the types you've seen so far.
13:38
But don't worry,
I'll do my best to walk you through it and
13:43
present it to you in a simple
way that's easy to understand.
13:47
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up