1
00:00:00,270 --> 00:00:02,520
- Now that you understand
what TypeScript is,

2
00:00:02,520 --> 00:00:05,460
I want to explain why you
would want to use TypeScript.

3
00:00:05,460 --> 00:00:07,200
'Cause one thing if you've
heard of TypeScript before

4
00:00:07,200 --> 00:00:08,670
that you may have heard people say

5
00:00:08,670 --> 00:00:11,130
is that it makes it more
difficult and time-consuming

6
00:00:11,130 --> 00:00:13,020
to write code because
now you have to add in

7
00:00:13,020 --> 00:00:15,180
all these additional types as well.

8
00:00:15,180 --> 00:00:17,280
But that couldn't be
further from the truth.

9
00:00:17,280 --> 00:00:18,113
In my opinion,

10
00:00:18,113 --> 00:00:20,760
TypeScript actually makes
writing code much quicker,

11
00:00:20,760 --> 00:00:23,280
especially on larger
projects because it makes it

12
00:00:23,280 --> 00:00:24,690
so you can detect bugs,

13
00:00:24,690 --> 00:00:27,750
and you have really good
auto-complete inside your code.

14
00:00:27,750 --> 00:00:29,040
Let me show you a quick example.

15
00:00:29,040 --> 00:00:31,380
Here, I just have a
normal JavaScript file.

16
00:00:31,380 --> 00:00:33,030
And let's say that I
wanted to create a button

17
00:00:33,030 --> 00:00:34,980
and add a click event listener to it.

18
00:00:34,980 --> 00:00:37,710
So I can say that this button
is going to be equal to

19
00:00:37,710 --> 00:00:39,690
document., I wanna do a create here,

20
00:00:39,690 --> 00:00:41,688
so I'll say createElement.

21
00:00:41,688 --> 00:00:42,540
And we're gonna create a button.

22
00:00:42,540 --> 00:00:44,250
And you notice throughout
that entire process,

23
00:00:44,250 --> 00:00:45,930
I had really good auto-complete.

24
00:00:45,930 --> 00:00:47,670
For example, as I start to type in create,

25
00:00:47,670 --> 00:00:48,900
you can see that I have, you know,

26
00:00:48,900 --> 00:00:49,733
all these different things.

27
00:00:49,733 --> 00:00:50,880
For example, createElement.

28
00:00:50,880 --> 00:00:53,250
When I type in here, I can
see that I have auto-complete

29
00:00:53,250 --> 00:00:55,440
for all the different things
that I could possibly create.

30
00:00:55,440 --> 00:00:56,880
That's a very good experience.

31
00:00:56,880 --> 00:00:58,680
Now let's go ahead and we're
gonna add an event listener.

32
00:00:58,680 --> 00:01:00,450
Again, super good auto complete.

33
00:01:00,450 --> 00:01:02,010
I have auto complete here.

34
00:01:02,010 --> 00:01:03,293
Let's say that the event,
I'll just call it e,

35
00:01:03,293 --> 00:01:05,970
and I'm just gonna console.log the target.

36
00:01:05,970 --> 00:01:07,590
Again, super good auto-complete.

37
00:01:07,590 --> 00:01:09,360
All of that had incredibly
good auto-complete,

38
00:01:09,360 --> 00:01:11,280
and my code was really
quick and easy to write.

39
00:01:11,280 --> 00:01:13,500
And this isn't just plain JavaScript.

40
00:01:13,500 --> 00:01:16,440
The reason that my code was
able to auto-complete so well

41
00:01:16,440 --> 00:01:19,890
is because actually VS Code
looks at your JavaScript Code

42
00:01:19,890 --> 00:01:22,290
and essentially tries to
infer all the different types

43
00:01:22,290 --> 00:01:23,940
based on different TypeScript stuff.

44
00:01:23,940 --> 00:01:25,530
It would know since
I'm creating an element

45
00:01:25,530 --> 00:01:27,510
of the type button,
that my button will have

46
00:01:27,510 --> 00:01:29,310
this HTML button element type.

47
00:01:29,310 --> 00:01:31,710
It just knows that based on
the different things I've done.

48
00:01:31,710 --> 00:01:33,060
Since I'm adding a click event listener,

49
00:01:33,060 --> 00:01:36,150
it knows my event is
technically called a MouseEvent.

50
00:01:36,150 --> 00:01:36,983
I hover over that,

51
00:01:36,983 --> 00:01:38,340
you can see it is a MouseEvent.

52
00:01:38,340 --> 00:01:40,590
VS Code is smart enough to
look at your JavaScript Code

53
00:01:40,590 --> 00:01:43,350
and essentially interpret it
in a TypeScript style way.

54
00:01:43,350 --> 00:01:44,280
But this breaks down

55
00:01:44,280 --> 00:01:47,070
as soon as you start to do
anything slightly complicated.

56
00:01:47,070 --> 00:01:50,190
For example, instead of just
writing my function right here,

57
00:01:50,190 --> 00:01:53,160
what if I wanted to pass it a
function such as handleClick?

58
00:01:53,160 --> 00:01:55,530
And then I wanted to define
this function down here,

59
00:01:55,530 --> 00:01:57,810
handleClick, pass it in an event,

60
00:01:57,810 --> 00:01:59,910
and now you'll notice that
my auto-complete is gone.

61
00:01:59,910 --> 00:02:01,950
When I say e., I have
no more auto-complete.

62
00:02:01,950 --> 00:02:03,750
There's nothing in here at all.

63
00:02:03,750 --> 00:02:06,360
So if I, for example,
have a typo, for example,

64
00:02:06,360 --> 00:02:08,430
I just do target incorrectly spelled,

65
00:02:08,430 --> 00:02:09,750
and let's just say that we'll do something

66
00:02:09,750 --> 00:02:10,583
that's not even target.

67
00:02:10,583 --> 00:02:12,300
We'll say, like, anyTarget, there we go.

68
00:02:12,300 --> 00:02:13,650
You can see I've spelled something wrong.

69
00:02:13,650 --> 00:02:16,380
There's nothing on this event
actually called anyTarget.

70
00:02:16,380 --> 00:02:17,520
But when I run my code,

71
00:02:17,520 --> 00:02:19,530
I'm not actually going to get any errors.

72
00:02:19,530 --> 00:02:21,930
And that's because this
event is an object,

73
00:02:21,930 --> 00:02:23,730
and it doesn't have an anyTarget property.

74
00:02:23,730 --> 00:02:25,470
So when you access a property on an object

75
00:02:25,470 --> 00:02:27,960
that doesn't exist, this
will just return undefined.

76
00:02:27,960 --> 00:02:29,550
So technically, this will just log out

77
00:02:29,550 --> 00:02:30,720
undefined in the console.

78
00:02:30,720 --> 00:02:32,940
So my code actually
won't throw any errors,

79
00:02:32,940 --> 00:02:34,710
even though obviously I made a mistake

80
00:02:34,710 --> 00:02:37,080
'cause I intended to
actually log the target,

81
00:02:37,080 --> 00:02:39,090
and I typed in something incorrect.

82
00:02:39,090 --> 00:02:41,220
You'll also notice when I hover
over any of these objects,

83
00:02:41,220 --> 00:02:42,420
they don't have any type information.

84
00:02:42,420 --> 00:02:43,500
It just says it could be anything.

85
00:02:43,500 --> 00:02:45,090
It doesn't know what it is.

86
00:02:45,090 --> 00:02:47,160
This is where the beauty
of TypeScript comes in,

87
00:02:47,160 --> 00:02:48,540
because now I can get all that

88
00:02:48,540 --> 00:02:50,100
super powerful auto-complete stuff

89
00:02:50,100 --> 00:02:51,450
that I showed you at the beginning,

90
00:02:51,450 --> 00:02:54,150
but I can make sure it's
applicable everywhere in my code.

91
00:02:54,150 --> 00:02:56,310
And it'll also detect any
types of bugs that I have,

92
00:02:56,310 --> 00:02:57,840
for example, when I mistype something

93
00:02:57,840 --> 00:02:59,850
or use a variable that doesn't exist.

94
00:02:59,850 --> 00:03:02,220
But what I can do is I can
create this script.ts file.

95
00:03:02,220 --> 00:03:03,053
I'll come into here.

96
00:03:03,053 --> 00:03:03,960
It's a completely blank file.

97
00:03:03,960 --> 00:03:05,550
And I'll write out the exact same code

98
00:03:05,550 --> 00:03:07,170
to show you what I'm talking about.

99
00:03:07,170 --> 00:03:08,160
We have our button.

100
00:03:08,160 --> 00:03:10,613
It's going to be equal to
document.createElement,

101
00:03:10,613 --> 00:03:11,880
and we wanna create a button element.

102
00:03:11,880 --> 00:03:13,590
All this auto-complete is super great.

103
00:03:13,590 --> 00:03:14,940
And you'll notice I'm
getting an error right here

104
00:03:14,940 --> 00:03:16,380
essentially saying that I'm trying to

105
00:03:16,380 --> 00:03:17,250
redeclare this variable.

106
00:03:17,250 --> 00:03:18,780
Let's just comment out
this code, there we go.

107
00:03:18,780 --> 00:03:20,070
That'll get rid of that error for us,

108
00:03:20,070 --> 00:03:21,690
just so we don't have two
files of the same name

109
00:03:21,690 --> 00:03:22,890
and the same code in them.

110
00:03:22,890 --> 00:03:25,410
And what I can do is I can
add that event listener.

111
00:03:25,410 --> 00:03:26,670
I'm gonna do the exact same thing.

112
00:03:26,670 --> 00:03:28,500
You'll see here I have
really good auto-complete.

113
00:03:28,500 --> 00:03:31,100
I'm gonna pass it in that
custom handleClick function.

114
00:03:31,100 --> 00:03:32,760
So now I'm going to define that function.

115
00:03:32,760 --> 00:03:36,750
So we'll say function
handleClick, just like that.

116
00:03:36,750 --> 00:03:39,000
It's taking in that e
object just like that.

117
00:03:39,000 --> 00:03:40,590
And I'm gonna console.log e.,

118
00:03:40,590 --> 00:03:43,050
and let's just say I
make the exact same typo.

119
00:03:43,050 --> 00:03:43,883
Now, by doing this,

120
00:03:43,883 --> 00:03:46,410
you'll notice I still don't
technically get any errors.

121
00:03:46,410 --> 00:03:47,580
That's 'cause I don't really have any

122
00:03:47,580 --> 00:03:49,110
TypeScript config set up.

123
00:03:49,110 --> 00:03:50,940
But if I just create a
simple TypeScript config,

124
00:03:50,940 --> 00:03:52,860
which again, I'm going to
cover in just a couple videos

125
00:03:52,860 --> 00:03:54,840
how to do this, and how
to understand everything,

126
00:03:54,840 --> 00:03:56,040
you'll notice when I go back into here,

127
00:03:56,040 --> 00:03:57,240
I'm now getting errors.

128
00:03:57,240 --> 00:03:58,470
And the error here is essentially saying

129
00:03:58,470 --> 00:04:00,780
that I don't have a type on this e object.

130
00:04:00,780 --> 00:04:01,800
Now, I'll define a type here.

131
00:04:01,800 --> 00:04:04,170
It's not important you
understand what this code does,

132
00:04:04,170 --> 00:04:06,227
but you can see just by
defining this as a MouseEvent,

133
00:04:06,227 --> 00:04:08,017
you'll now see I get
another error that's saying,

134
00:04:08,017 --> 00:04:10,710
"Hey, there's no anyTarget
on this Mouse Event."

135
00:04:10,710 --> 00:04:12,690
Instead, I should have
spelled it as target.

136
00:04:12,690 --> 00:04:15,060
And you'll also notice, look,
I have the full auto-complete

137
00:04:15,060 --> 00:04:16,560
that I had before where
I can just come in here

138
00:04:16,560 --> 00:04:17,550
and do target.

139
00:04:17,550 --> 00:04:18,810
Or maybe I wanna get the current target.

140
00:04:18,810 --> 00:04:20,970
I have all that super
great auto-complete power

141
00:04:20,970 --> 00:04:21,930
that I had before,

142
00:04:21,930 --> 00:04:24,210
which makes writing code incredibly quick.

143
00:04:24,210 --> 00:04:25,800
But I also get that error protection

144
00:04:25,800 --> 00:04:28,020
by having TypeScript in my code base.

145
00:04:28,020 --> 00:04:29,940
You'll also notice to
get all of this power,

146
00:04:29,940 --> 00:04:32,160
I had to add one word to my code.

147
00:04:32,160 --> 00:04:34,170
So it's really small
the amount of TypeScript

148
00:04:34,170 --> 00:04:35,670
you actually need to add to your code

149
00:04:35,670 --> 00:04:37,620
to get all these different superpowers.

150
00:04:37,620 --> 00:04:40,200
And the superpowers you get
make you code so much faster,

151
00:04:40,200 --> 00:04:42,480
and give you the ability to detect errors

152
00:04:42,480 --> 00:04:44,820
that are impossible to
detect in normal JavaScript.

153
00:04:44,820 --> 00:04:46,770
Now, even if this isn't
enough to convince you

154
00:04:46,770 --> 00:04:48,150
that TypeScript is amazing,

155
00:04:48,150 --> 00:04:50,190
and that you should be
using it in your projects,

156
00:04:50,190 --> 00:04:52,950
knowing that most companies
out there are using TypeScript

157
00:04:52,950 --> 00:04:54,480
or converting over to TypeScript

158
00:04:54,480 --> 00:04:57,000
because it's constantly
increasing in popularity

159
00:04:57,000 --> 00:04:59,010
is another huge reason to use TypeScript.

160
00:04:59,010 --> 00:05:00,420
Because as the years go on,

161
00:05:00,420 --> 00:05:02,280
more and more companies
are going to require

162
00:05:02,280 --> 00:05:03,540
that you actually know TypeScript,

163
00:05:03,540 --> 00:05:05,840
instead of just having
it as a recommendation.