1
00:00:00,250 --> 00:00:07,280
Okay, so in our last video, we talked
about what TypeScript is at a basic level.

2
00:00:07,280 --> 00:00:12,350
And in this video, we're going to talk
about the benefits of using TypeScript.

3
00:00:12,350 --> 00:00:15,400
Why would you use TypeScript
in the first place?

4
00:00:15,400 --> 00:00:21,201
There are many benefits to writing code in
a strongly typed language like TypeScript.

5
00:00:21,201 --> 00:00:25,860
But to keep things simple,
we'll just go through three of them.

6
00:00:25,860 --> 00:00:32,289
Incorrect method access, missing object
keys, and early error detection.

7
00:00:32,289 --> 00:00:37,154
It's going to be easier to explain
all these things with some code.

8
00:00:37,154 --> 00:00:42,949
If you want to follow along or just get
access to all the code I'm going to write,

9
00:00:42,949 --> 00:00:48,680
make sure you've downloaded the project
file in the download section below.

10
00:00:48,680 --> 00:00:54,536
Once you've done that, open the file
called why-use-typescript.js.

11
00:00:54,536 --> 00:00:58,434
And this can be found in
the "getting-started"-folder.

12
00:00:58,434 --> 00:01:03,054
We're going to open the browser inspector,
like we did in the last video.

13
00:01:03,054 --> 00:01:06,865
And to do that,
right click anywhere in your browser and

14
00:01:06,865 --> 00:01:09,470
press the Inspect link at the bottom.

15
00:01:11,780 --> 00:01:17,260
Let's click on the Console tab and
remove anything that is in there already.

16
00:01:17,260 --> 00:01:21,924
The first point we're going to talk
about is incorrect access method.

17
00:01:21,924 --> 00:01:26,436
Let's create a variable called animal and
give it the value of elephant.

18
00:01:29,432 --> 00:01:32,122
As I explained in the previous video,

19
00:01:32,122 --> 00:01:35,915
JavaScript will give this
variable a type of string.

20
00:01:37,720 --> 00:01:43,952
JavaScript allows you to manipulate
strings using string-specific methods.

21
00:01:43,952 --> 00:01:47,353
If you want to see a full
list of these methods,

22
00:01:47,353 --> 00:01:52,690
you can check out the Mozilla Web
Documentation site, or MDN for short.

23
00:01:53,850 --> 00:01:58,293
Anyway, one of these string
methods is called toUpperCase, and

24
00:01:58,293 --> 00:02:02,330
it makes all the characters
in a string uppercase.

25
00:02:02,330 --> 00:02:05,538
If we add that to our animal variable,

26
00:02:05,538 --> 00:02:11,650
we should see the word ELEPHANT in
capital letters just like this.

27
00:02:11,650 --> 00:02:16,605
If we were to change the value
of animal from elephant to 22.

28
00:02:19,808 --> 00:02:23,370
And now let's try running
the toUpperCase method, and

29
00:02:23,370 --> 00:02:27,627
pressing the up key on my keyboard
to get the code I previously ran.

30
00:02:27,627 --> 00:02:28,890
You'll see we get an error.

31
00:02:29,990 --> 00:02:34,413
This happens because animal no
longer has a type of string, but

32
00:02:34,413 --> 00:02:36,680
now has a type of number.

33
00:02:36,680 --> 00:02:42,550
And the toUpperCase method does not work
with a variable that has a number type.

34
00:02:42,550 --> 00:02:44,854
If we were using TypeScript, and

35
00:02:44,854 --> 00:02:48,969
we had manually given the animal
variable a type of string,

36
00:02:48,969 --> 00:02:55,120
TypeScript would prevent us from even
changing the animal variable to a number.

37
00:02:55,120 --> 00:02:58,538
So we wouldn't have been
able to change it to 22.

38
00:02:58,538 --> 00:03:03,793
Let's make the animal variable a string
again by reassigning it to elephant.

39
00:03:08,455 --> 00:03:13,919
Now, if we were to give the string
a method that only a number would use,

40
00:03:13,919 --> 00:03:16,119
we would get the same error.

41
00:03:16,119 --> 00:03:22,123
We can try using the toFixed method on our
animal variable to see what will happen.

42
00:03:26,819 --> 00:03:31,742
And you can see we get another
error because the toFixed method

43
00:03:31,742 --> 00:03:34,306
should only be used on a number.

44
00:03:34,306 --> 00:03:40,320
Notice JavaScript gives us an error
only when we run the code at runtime.

45
00:03:40,320 --> 00:03:42,595
But if we were to use TypeScript,

46
00:03:42,595 --> 00:03:46,670
we'd get this error before we
ran the code at compile time.

47
00:03:48,150 --> 00:03:53,580
Now let's talk about the next point,
missing or incorrect object keys.

48
00:03:53,580 --> 00:03:55,281
Before we write any new code,

49
00:03:55,281 --> 00:03:59,170
let's clear this existing code by
clicking on this button up here.

50
00:04:00,610 --> 00:04:03,190
Now let's create an object called hero.

51
00:04:04,470 --> 00:04:08,364
In the console, if you want to
make a new line like I have,

52
00:04:08,364 --> 00:04:11,215
you have to press the Shift and Enter key.

53
00:04:11,215 --> 00:04:15,132
Pressing the Enter key on its
own will execute the code and

54
00:04:15,132 --> 00:04:17,350
not give you a new line.

55
00:04:17,350 --> 00:04:21,050
Please bear in mind, this will
only work in the browser console.

56
00:04:21,050 --> 00:04:24,223
If you're using the terminal or
the console in VS Code,

57
00:04:24,223 --> 00:04:26,710
this probably won't work.

58
00:04:26,710 --> 00:04:29,500
Okay, let's get back to the code.

59
00:04:29,500 --> 00:04:33,987
Let's give our object
a property of firstName,

60
00:04:33,987 --> 00:04:37,249
with a value of Kamala as a string.

61
00:04:37,249 --> 00:04:44,393
And we'll give it another property
of lastName, with Khan as a string.

62
00:04:44,393 --> 00:04:50,472
And a final property of age,
which will be a number of 17.

63
00:04:50,472 --> 00:04:55,489
Now let's create a variable
called message, and

64
00:04:55,489 --> 00:05:01,820
this will have a string literal
with Hello, and the variable or

65
00:05:01,820 --> 00:05:06,612
the property of our hero
object's firstName.

66
00:05:06,612 --> 00:05:09,690
This should give us Hello Kamala.

67
00:05:09,690 --> 00:05:14,389
If we were to update our
message variable and

68
00:05:14,389 --> 00:05:21,030
change firstName to gender,
we get Hello undefined.

69
00:05:21,030 --> 00:05:25,460
And this happens because the gender
property does not exist in our hero

70
00:05:25,460 --> 00:05:26,790
object.

71
00:05:26,790 --> 00:05:31,450
If we were using a TypeScript,
we wouldn't execute an array like this.

72
00:05:31,450 --> 00:05:35,392
Because this will get picked up
long before we run the code.

73
00:05:35,392 --> 00:05:38,772
Because TypeScript knows
the type of our object, and

74
00:05:38,772 --> 00:05:43,655
knows the exact properties that exist in
our object, it will throw us an error

75
00:05:43,655 --> 00:05:48,560
telling us that the gender property
doesn't exist, before we run the code.

76
00:05:48,560 --> 00:05:53,705
If we were to spell an object
property name incorrectly,

77
00:05:53,705 --> 00:05:59,610
for example, instead of doing firstName,
say we did firstNme.

78
00:05:59,610 --> 00:06:03,230
Sorry, it looks like my
console auto corrected that.

79
00:06:03,230 --> 00:06:04,710
Let's try again.

80
00:06:04,710 --> 00:06:09,590
So firstNme, we also get Hello undefined.

81
00:06:09,590 --> 00:06:14,563
And, again, if we were using TypeScript,
this issue will be picked

82
00:06:14,563 --> 00:06:19,453
up because TypeScript will know
the exact name of our properties and

83
00:06:19,453 --> 00:06:25,240
will tell us that there isn't one
in our hero object called firstNme.

84
00:06:25,240 --> 00:06:30,840
Okay, let's move on to the next point,
which is early error detection.

85
00:06:30,840 --> 00:06:35,210
And for this point, we're not going
to use the console in our browser.

86
00:06:35,210 --> 00:06:39,763
We're going to be using a site
called The TypeScript Playground.

87
00:06:39,763 --> 00:06:44,386
And we're doing this because currently
it's not possible to run TypeScript code

88
00:06:44,386 --> 00:06:45,594
inside the browser.

89
00:06:45,594 --> 00:06:49,539
If you want to find the site,
you can simply do a search in Google for

90
00:06:49,539 --> 00:06:53,450
TypeScript Playground and
click on the first link.

91
00:06:53,450 --> 00:06:57,280
You should get to a site
that looks like this.

92
00:06:57,280 --> 00:07:00,795
Now, what I'm gonna do is get rid of this
section on the right because we're not

93
00:07:00,795 --> 00:07:02,140
going to use it.

94
00:07:02,140 --> 00:07:07,173
And I'm going to copy the code from
the Why use TypeScript JavaScript

95
00:07:07,173 --> 00:07:10,749
file I talked about earlier and
paste it in here.

96
00:07:10,749 --> 00:07:16,650
So that's all of this code, including
the comments up to about this stage.

97
00:07:16,650 --> 00:07:21,057
I'm going to select all of the text
in here by pressing Cmd+A,

98
00:07:21,057 --> 00:07:24,240
deleting it, and pressing Cmd+V to paste.

99
00:07:24,240 --> 00:07:30,630
This treats our JavaScript code like it's
Typescript and compiles it to JavaScript.

100
00:07:31,930 --> 00:07:36,814
We can see that on the right side here,
if we want to, but I'm not gonna focus on

101
00:07:36,814 --> 00:07:41,680
the compiling stage at the moment,
just the errors that are shown.

102
00:07:41,680 --> 00:07:48,090
As you can see, there are a few bits of
code with red squiggly lines under them.

103
00:07:48,090 --> 00:07:51,780
This means that TypeScript
has picked up errors in them.

104
00:07:51,780 --> 00:07:55,451
And there are four errors
TypeScript has picked up.

105
00:07:55,451 --> 00:07:58,807
These are all errors that I've
mentioned earlier in this video.

106
00:07:58,807 --> 00:08:05,167
But, I think it's helpful to actually
see the error messages TypeScript gives.

107
00:08:05,167 --> 00:08:06,948
So, for the first one,

108
00:08:06,948 --> 00:08:13,140
you'll see it gives an error type number
is not assignable to type string.

109
00:08:13,140 --> 00:08:19,163
This is because at this stage of the code,
line 8, animal is of type string.

110
00:08:19,163 --> 00:08:22,945
By assigning animal to
a string called elephant,

111
00:08:22,945 --> 00:08:29,520
TypeScript has set it to a string type,
and therefore it should not be changed.

112
00:08:29,520 --> 00:08:33,968
So when it is changed,
TypeScript gives us an error.

113
00:08:33,968 --> 00:08:40,176
Similarly, on line 11, because it
sees the animal variable as a string,

114
00:08:40,176 --> 00:08:44,444
you cannot run a number
method on a string variable.

115
00:08:44,444 --> 00:08:46,858
So it throws an error here saying,

116
00:08:46,858 --> 00:08:50,537
property parseFloat does
not exist on type string.

117
00:08:50,537 --> 00:08:55,524
Let's scroll down a bit and
focus on errors on line 23 and 25.

118
00:08:57,040 --> 00:09:01,322
This error happens because
the property gender does not

119
00:09:01,322 --> 00:09:06,230
exist on our hero constant,
which we wrote up here.

120
00:09:06,230 --> 00:09:10,953
As you can see, TypeScript has made
note of the three properties in this

121
00:09:10,953 --> 00:09:14,020
hero variable and has given them types.

122
00:09:14,020 --> 00:09:15,340
So the first one is a string.

123
00:09:15,340 --> 00:09:16,630
The second one is a string.

124
00:09:16,630 --> 00:09:18,160
And the third one is number.

125
00:09:18,160 --> 00:09:20,670
It's also made note of their names.

126
00:09:20,670 --> 00:09:25,459
So TypeScript knows that the gender
property on line 23 does not exist in our

127
00:09:25,459 --> 00:09:30,410
hero variable, because it's made note
of the three properties that do exist.

128
00:09:31,600 --> 00:09:36,521
Similarly, on line 25, it knows that
there isn't a property called firstNme,

129
00:09:36,521 --> 00:09:37,870
for the same reasons.

130
00:09:39,100 --> 00:09:44,166
Now, the examples I've gone through in
this video are quite simple, so it's

131
00:09:44,166 --> 00:09:50,200
unlikely you'll make these exact mistakes
in JavaScript code that you write.

132
00:09:50,200 --> 00:09:54,367
But you can imagine how helpful
it would be if these sorts of

133
00:09:54,367 --> 00:09:59,590
errors were picked up in a larger,
more complex code base.

134
00:09:59,590 --> 00:10:04,570
Now that you've seen a glimpse of what
TypeScript can do, let's go ahead and

135
00:10:04,570 --> 00:10:07,340
set up a TypeScript project from scratch.