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
In this video, we’re going to talk about the benefits of using TypeScript and why you would use typescript.
If you are following along in the VSCode terminal or your regular terminal, you can leave out the closing curly brace "}" when adding a new line.
Code
let animal = 'elephant';
typeof animal;
animal.toUpperCase();
animal = 22;
animal.toUpperCase();
animal.toString();
const hero = {
firstName: 'Kamela',
lastName: 'Khan',
age: 17,
};
let message = `Hello ${hero.firstName}`;
message = `Hello ${hero.gender}`;
message = `Hello ${hero.firstNme}`;
Resources
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
Okay, so in our last video, we talked
about what TypeScript is at a basic level.
0:00
And in this video, we're going to talk
about the benefits of using TypeScript.
0:07
Why would you use TypeScript
in the first place?
0:12
There are many benefits to writing code in
a strongly typed language like TypeScript.
0:15
But to keep things simple,
we'll just go through three of them.
0:21
Incorrect method access, missing object
keys, and early error detection.
0:25
It's going to be easier to explain
all these things with some code.
0:32
If you want to follow along or just get
access to all the code I'm going to write,
0:37
make sure you've downloaded the project
file in the download section below.
0:42
Once you've done that, open the file
called why-use-typescript.js.
0:48
And this can be found in
the "getting-started"-folder.
0:54
We're going to open the browser inspector,
like we did in the last video.
0:58
And to do that,
right click anywhere in your browser and
1:03
press the Inspect link at the bottom.
1:06
Let's click on the Console tab and
remove anything that is in there already.
1:11
The first point we're going to talk
about is incorrect access method.
1:17
Let's create a variable called animal and
give it the value of elephant.
1:21
As I explained in the previous video,
1:29
JavaScript will give this
variable a type of string.
1:32
JavaScript allows you to manipulate
strings using string-specific methods.
1:37
If you want to see a full
list of these methods,
1:43
you can check out the Mozilla Web
Documentation site, or MDN for short.
1:47
Anyway, one of these string
methods is called toUpperCase, and
1:53
it makes all the characters
in a string uppercase.
1:58
If we add that to our animal variable,
2:02
we should see the word ELEPHANT in
capital letters just like this.
2:05
If we were to change the value
of animal from elephant to 22.
2:11
And now let's try running
the toUpperCase method, and
2:19
pressing the up key on my keyboard
to get the code I previously ran.
2:23
You'll see we get an error.
2:27
This happens because animal no
longer has a type of string, but
2:29
now has a type of number.
2:34
And the toUpperCase method does not work
with a variable that has a number type.
2:36
If we were using TypeScript, and
2:42
we had manually given the animal
variable a type of string,
2:44
TypeScript would prevent us from even
changing the animal variable to a number.
2:48
So we wouldn't have been
able to change it to 22.
2:55
Let's make the animal variable a string
again by reassigning it to elephant.
2:58
Now, if we were to give the string
a method that only a number would use,
3:08
we would get the same error.
3:13
We can try using the toFixed method on our
animal variable to see what will happen.
3:16
And you can see we get another
error because the toFixed method
3:26
should only be used on a number.
3:31
Notice JavaScript gives us an error
only when we run the code at runtime.
3:34
But if we were to use TypeScript,
3:40
we'd get this error before we
ran the code at compile time.
3:42
Now let's talk about the next point,
missing or incorrect object keys.
3:48
Before we write any new code,
3:53
let's clear this existing code by
clicking on this button up here.
3:55
Now let's create an object called hero.
4:00
In the console, if you want to
make a new line like I have,
4:04
you have to press the Shift and Enter key.
4:08
Pressing the Enter key on its
own will execute the code and
4:11
not give you a new line.
4:15
Please bear in mind, this will
only work in the browser console.
4:17
If you're using the terminal or
the console in VS Code,
4:21
this probably won't work.
4:24
Okay, let's get back to the code.
4:26
Let's give our object
a property of firstName,
4:29
with a value of Kamala as a string.
4:33
And we'll give it another property
of lastName, with Khan as a string.
4:37
And a final property of age,
which will be a number of 17.
4:44
Now let's create a variable
called message, and
4:50
this will have a string literal
with Hello, and the variable or
4:55
the property of our hero
object's firstName.
5:01
This should give us Hello Kamala.
5:06
If we were to update our
message variable and
5:09
change firstName to gender,
we get Hello undefined.
5:14
And this happens because the gender
property does not exist in our hero
5:21
object.
5:25
If we were using a TypeScript,
we wouldn't execute an array like this.
5:26
Because this will get picked up
long before we run the code.
5:31
Because TypeScript knows
the type of our object, and
5:35
knows the exact properties that exist in
our object, it will throw us an error
5:38
telling us that the gender property
doesn't exist, before we run the code.
5:43
If we were to spell an object
property name incorrectly,
5:48
for example, instead of doing firstName,
say we did firstNme.
5:53
Sorry, it looks like my
console auto corrected that.
5:59
Let's try again.
6:03
So firstNme, we also get Hello undefined.
6:04
And, again, if we were using TypeScript,
this issue will be picked
6:09
up because TypeScript will know
the exact name of our properties and
6:14
will tell us that there isn't one
in our hero object called firstNme.
6:19
Okay, let's move on to the next point,
which is early error detection.
6:25
And for this point, we're not going
to use the console in our browser.
6:30
We're going to be using a site
called The TypeScript Playground.
6:35
And we're doing this because currently
it's not possible to run TypeScript code
6:39
inside the browser.
6:44
If you want to find the site,
you can simply do a search in Google for
6:45
TypeScript Playground and
click on the first link.
6:49
You should get to a site
that looks like this.
6:53
Now, what I'm gonna do is get rid of this
section on the right because we're not
6:57
going to use it.
7:00
And I'm going to copy the code from
the Why use TypeScript JavaScript
7:02
file I talked about earlier and
paste it in here.
7:07
So that's all of this code, including
the comments up to about this stage.
7:10
I'm going to select all of the text
in here by pressing Cmd+A,
7:16
deleting it, and pressing Cmd+V to paste.
7:21
This treats our JavaScript code like it's
Typescript and compiles it to JavaScript.
7:24
We can see that on the right side here,
if we want to, but I'm not gonna focus on
7:31
the compiling stage at the moment,
just the errors that are shown.
7:36
As you can see, there are a few bits of
code with red squiggly lines under them.
7:41
This means that TypeScript
has picked up errors in them.
7:48
And there are four errors
TypeScript has picked up.
7:51
These are all errors that I've
mentioned earlier in this video.
7:55
But, I think it's helpful to actually
see the error messages TypeScript gives.
7:58
So, for the first one,
8:05
you'll see it gives an error type number
is not assignable to type string.
8:06
This is because at this stage of the code,
line 8, animal is of type string.
8:13
By assigning animal to
a string called elephant,
8:19
TypeScript has set it to a string type,
and therefore it should not be changed.
8:22
So when it is changed,
TypeScript gives us an error.
8:29
Similarly, on line 11, because it
sees the animal variable as a string,
8:33
you cannot run a number
method on a string variable.
8:40
So it throws an error here saying,
8:44
property parseFloat does
not exist on type string.
8:46
Let's scroll down a bit and
focus on errors on line 23 and 25.
8:50
This error happens because
the property gender does not
8:57
exist on our hero constant,
which we wrote up here.
9:01
As you can see, TypeScript has made
note of the three properties in this
9:06
hero variable and has given them types.
9:10
So the first one is a string.
9:14
The second one is a string.
9:15
And the third one is number.
9:16
It's also made note of their names.
9:18
So TypeScript knows that the gender
property on line 23 does not exist in our
9:20
hero variable, because it's made note
of the three properties that do exist.
9:25
Similarly, on line 25, it knows that
there isn't a property called firstNme,
9:31
for the same reasons.
9:36
Now, the examples I've gone through in
this video are quite simple, so it's
9:39
unlikely you'll make these exact mistakes
in JavaScript code that you write.
9:44
But you can imagine how helpful
it would be if these sorts of
9:50
errors were picked up in a larger,
more complex code base.
9:54
Now that you've seen a glimpse of what
TypeScript can do, let's go ahead and
9:59
set up a TypeScript project from scratch.
10:04
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