1
00:00:00,170 --> 00:00:01,650
- In this video, I'm gonna be talking

2
00:00:01,650 --> 00:00:04,680
all about how you can
assign types in TypeScript

3
00:00:04,680 --> 00:00:06,570
which we've already kind
of looked at a little bit.

4
00:00:06,570 --> 00:00:09,090
And then also the most
important part of TypeScript

5
00:00:09,090 --> 00:00:10,470
which is type inference

6
00:00:10,470 --> 00:00:12,930
which is how you can do pretty
much everything in TypeScript

7
00:00:12,930 --> 00:00:15,360
without actually knowing
that much TypeScript.

8
00:00:15,360 --> 00:00:16,590
The very first thing I wanna talk about

9
00:00:16,590 --> 00:00:18,900
is how you actually assign
a type to a variable.

10
00:00:18,900 --> 00:00:21,150
We can just come in here,
we can create a variable a,

11
00:00:21,150 --> 00:00:23,040
and let's just say,
we're gonna set it to 4.

12
00:00:23,040 --> 00:00:25,740
And we want to actually type
this variable a as a number

13
00:00:25,740 --> 00:00:27,510
so that TypeScript knows this as a number

14
00:00:27,510 --> 00:00:30,210
and we can only do things
related to numbers with it.

15
00:00:30,210 --> 00:00:31,530
Well, the way that you
do that in TypeScript

16
00:00:31,530 --> 00:00:32,610
to type a variable

17
00:00:32,610 --> 00:00:35,070
is what you do is you just put
a colon after the variable,

18
00:00:35,070 --> 00:00:37,737
put a space, and then put
whatever the type is going to be.

19
00:00:37,737 --> 00:00:39,450
Now you will notice when
you type out number,

20
00:00:39,450 --> 00:00:40,860
there are two different
ways you can do it.

21
00:00:40,860 --> 00:00:42,630
One is going to be lowercase number

22
00:00:42,630 --> 00:00:44,730
and one is going to be uppercase Number.

23
00:00:44,730 --> 00:00:46,230
It's the same thing with string, Boolean,

24
00:00:46,230 --> 00:00:48,060
and a bunch of other
different primitive types

25
00:00:48,060 --> 00:00:48,893
in JavaScript.

26
00:00:48,893 --> 00:00:50,820
The important thing to note
is when you're doing things

27
00:00:50,820 --> 00:00:52,710
like string, Boolean, and numbers,

28
00:00:52,710 --> 00:00:55,170
you always want to use
the lowercase version

29
00:00:55,170 --> 00:00:57,180
instead of the uppercase version.

30
00:00:57,180 --> 00:00:58,710
That's because of the way that JavaScript

31
00:00:58,710 --> 00:00:59,670
is actually written.

32
00:00:59,670 --> 00:01:01,117
Because what you can do is I can say,

33
00:01:01,117 --> 00:01:02,430
"I want to create a new Number."

34
00:01:02,430 --> 00:01:05,820
Like this, and that will give
you a type of uppercase number

35
00:01:05,820 --> 00:01:08,580
or you can just use a
normal number like 4 or 3,

36
00:01:08,580 --> 00:01:10,890
and that's going to be a lowercase number.

37
00:01:10,890 --> 00:01:11,760
Now it's not important

38
00:01:11,760 --> 00:01:12,960
that you know the
difference between the two

39
00:01:12,960 --> 00:01:14,130
because it's super mynute

40
00:01:14,130 --> 00:01:16,230
and it's like really
hardcore JavaScript stuff

41
00:01:16,230 --> 00:01:17,730
that determines those differences.

42
00:01:17,730 --> 00:01:19,560
But when you're defining
types in TypeScript,

43
00:01:19,560 --> 00:01:20,610
just make sure to always use

44
00:01:20,610 --> 00:01:22,200
that lowercase primitive version

45
00:01:22,200 --> 00:01:24,150
instead of the uppercase version.

46
00:01:24,150 --> 00:01:26,220
Now, if we say this and we
try to do something on a,

47
00:01:26,220 --> 00:01:27,810
you can see we have all
the different methods

48
00:01:27,810 --> 00:01:28,890
that are available on our numbers.

49
00:01:28,890 --> 00:01:32,460
For example, toFixed,
toExponent, toString, and so on.

50
00:01:32,460 --> 00:01:33,810
If we hover over this a variable,

51
00:01:33,810 --> 00:01:35,280
you can see it has a type of number.

52
00:01:35,280 --> 00:01:37,320
So we at least know that this is working.

53
00:01:37,320 --> 00:01:39,090
You can even see that the
way that things are typed

54
00:01:39,090 --> 00:01:40,260
when you actually hover over them,

55
00:01:40,260 --> 00:01:43,200
is that same colon syntax
that you can see right here.

56
00:01:43,200 --> 00:01:45,480
Now if I were to create, for
example, a string instead.

57
00:01:45,480 --> 00:01:47,100
So if I wanted this to be a string

58
00:01:47,100 --> 00:01:48,210
and then I'll notice I get an error

59
00:01:48,210 --> 00:01:50,130
because I have it
explicitly typed as a number

60
00:01:50,130 --> 00:01:51,060
but it is a string.

61
00:01:51,060 --> 00:01:51,900
So I'm gonna come in here,

62
00:01:51,900 --> 00:01:54,000
I'm gonna say that this is now a string.

63
00:01:54,000 --> 00:01:55,680
Also something that's really
nice about TypeScript.

64
00:01:55,680 --> 00:01:57,600
If I had to try to
assign this to a number,

65
00:01:57,600 --> 00:01:58,433
I'm gonna get an error

66
00:01:58,433 --> 00:01:59,790
because I can't assign this to a number

67
00:01:59,790 --> 00:02:02,190
since I explicitly declared
that it is a string.

68
00:02:02,190 --> 00:02:03,720
So this is just some
of the power right here

69
00:02:03,720 --> 00:02:04,553
behind TypeScript.

70
00:02:04,553 --> 00:02:06,690
Whenever you type something
as a specific type,

71
00:02:06,690 --> 00:02:08,490
it assumes it's always
going to be that type.

72
00:02:08,490 --> 00:02:10,830
So you can never redefine
it as a different type.

73
00:02:10,830 --> 00:02:12,420
It's just going to be, like,
"Okay, this is a string.

74
00:02:12,420 --> 00:02:13,500
You're trying to assign a number.

75
00:02:13,500 --> 00:02:15,300
That's obviously not going to work."

76
00:02:15,300 --> 00:02:17,340
That's what allows you to get
that really good auto-complete

77
00:02:17,340 --> 00:02:19,500
and the really good error protection.

78
00:02:19,500 --> 00:02:21,720
Now I also talked about how
you can have type inference

79
00:02:21,720 --> 00:02:23,910
which is the really
powerful part of TypeScript.

80
00:02:23,910 --> 00:02:25,260
And what I can do is I can just remove

81
00:02:25,260 --> 00:02:27,180
where this says string
and the colon right here

82
00:02:27,180 --> 00:02:29,010
and my code is going to
work exactly the same.

83
00:02:29,010 --> 00:02:29,910
When I hover over a,

84
00:02:29,910 --> 00:02:32,093
you can see it has a type here of string.

85
00:02:32,093 --> 00:02:34,067
And you also see down here
that I'm still getting an error

86
00:02:34,067 --> 00:02:37,500
'cause I'm trying to assign
a number to a type of string.

87
00:02:37,500 --> 00:02:39,600
And this is what I really
love about TypeScript

88
00:02:39,600 --> 00:02:41,880
compared to pretty much any
other type language out there

89
00:02:41,880 --> 00:02:44,400
is that TypeScript is smart
enough to just look at your code

90
00:02:44,400 --> 00:02:46,770
and know what the different
types of things are going to be.

91
00:02:46,770 --> 00:02:48,990
So you don't have to write
actually that very many types

92
00:02:48,990 --> 00:02:50,760
inside of your JavaScript code.

93
00:02:50,760 --> 00:02:51,593
Most of the time,

94
00:02:51,593 --> 00:02:53,790
the only time you actually
need to type something

95
00:02:53,790 --> 00:02:55,320
is when you are defining a variable

96
00:02:55,320 --> 00:02:57,150
that has no value at all.

97
00:02:57,150 --> 00:02:59,280
So for example here, this
doesn't have any type.

98
00:02:59,280 --> 00:03:00,300
And if I wanted to give it a type,

99
00:03:00,300 --> 00:03:02,280
I could say that it is
going to be a string.

100
00:03:02,280 --> 00:03:03,150
That's one scenario.

101
00:03:03,150 --> 00:03:04,590
Or when you're defining functions,

102
00:03:04,590 --> 00:03:06,990
that's another scenario where
you have to give things types.

103
00:03:06,990 --> 00:03:08,670
But in almost all other scenarios,

104
00:03:08,670 --> 00:03:10,590
you can just infer the type of things

105
00:03:10,590 --> 00:03:11,790
based on what you assign them to

106
00:03:11,790 --> 00:03:13,560
which is something I really love.

107
00:03:13,560 --> 00:03:14,790
Now, one thing that you may have noticed

108
00:03:14,790 --> 00:03:16,380
if you're following along with this,

109
00:03:16,380 --> 00:03:17,970
is that actually if I just come in here,

110
00:03:17,970 --> 00:03:18,803
we're just gonna say,

111
00:03:18,803 --> 00:03:20,580
"That this is going to be
equal to the value of 4."

112
00:03:20,580 --> 00:03:21,480
We'll get rid of this down here.

113
00:03:21,480 --> 00:03:22,680
So it's going to be a number.

114
00:03:22,680 --> 00:03:24,421
You can see when I hover, it's a number.

115
00:03:24,421 --> 00:03:26,280
If I were to use const
here instead of let,

116
00:03:26,280 --> 00:03:27,840
you'll actually see that the type a here

117
00:03:27,840 --> 00:03:30,000
is the explicit value of 4.

118
00:03:30,000 --> 00:03:32,220
Now the reason for this is
because of something called

119
00:03:32,220 --> 00:03:34,320
a literal type in TypeScript.

120
00:03:34,320 --> 00:03:36,660
A literal type just
says that this variable

121
00:03:36,660 --> 00:03:37,830
or whatever you're typing,

122
00:03:37,830 --> 00:03:40,170
can only be literally one thing

123
00:03:40,170 --> 00:03:42,030
and that is the value of 4.

124
00:03:42,030 --> 00:03:43,800
That's because this is a constant variable

125
00:03:43,800 --> 00:03:44,970
set to a value of 4.

126
00:03:44,970 --> 00:03:45,960
This can never change.

127
00:03:45,960 --> 00:03:48,450
It's impossible for me to say, like a = 3,

128
00:03:48,450 --> 00:03:51,240
that fails in JavaScript
not just in TypeScript.

129
00:03:51,240 --> 00:03:52,560
But it's going to fail
in TypeScript as well

130
00:03:52,560 --> 00:03:54,150
because I'm trying to assign 3 to a value

131
00:03:54,150 --> 00:03:55,590
that is supposed to be 4.

132
00:03:55,590 --> 00:03:57,750
So when you use const to define a variable

133
00:03:57,750 --> 00:03:59,670
and you give it like a
static primitive value

134
00:03:59,670 --> 00:04:01,740
like a number or a string
or something like that,

135
00:04:01,740 --> 00:04:04,440
it's going to show up as
an actual literal type

136
00:04:04,440 --> 00:04:06,630
instead of the more generic number type

137
00:04:06,630 --> 00:04:09,420
because this can only have the type of 4.

138
00:04:09,420 --> 00:04:11,700
Now this is different if you
use an object, for example.

139
00:04:11,700 --> 00:04:13,350
And that's because even if you use const,

140
00:04:13,350 --> 00:04:15,270
you can still change the
properties of an object

141
00:04:15,270 --> 00:04:16,980
that's just a built-in JavaScript feature,

142
00:04:16,980 --> 00:04:18,240
same thing with arrays,

143
00:04:18,240 --> 00:04:20,310
you don't have to worry
about that in those cases.

144
00:04:20,310 --> 00:04:21,540
But if you're using primitive values,

145
00:04:21,540 --> 00:04:23,010
you will run into that if you use const.

146
00:04:23,010 --> 00:04:24,060
Which is perfectly okay.

147
00:04:24,060 --> 00:04:26,310
If you know that this is a
constant variable of the value 4

148
00:04:26,310 --> 00:04:27,330
that never changes,

149
00:04:27,330 --> 00:04:28,710
you should use constant to find that,

150
00:04:28,710 --> 00:04:30,480
and let this inference actually say

151
00:04:30,480 --> 00:04:32,610
that this is a literal type of 4.

152
00:04:32,610 --> 00:04:34,530
You can also explicitly say

153
00:04:34,530 --> 00:04:36,210
something is going to be a literal type.

154
00:04:36,210 --> 00:04:37,043
So I can come in here

155
00:04:37,043 --> 00:04:39,480
and I can actually type this
as the value of 4 manually,

156
00:04:39,480 --> 00:04:42,240
and you can see I get the exact
same typing definition here.

157
00:04:42,240 --> 00:04:44,820
But the point of doing this
is pretty much non-existent.

158
00:04:44,820 --> 00:04:47,160
You would almost never write
out your types like this.

159
00:04:47,160 --> 00:04:48,390
Instead, you would just use const

160
00:04:48,390 --> 00:04:50,490
and let TypeScript do
that inference for you.

161
00:04:50,490 --> 00:04:52,500
Now the final kind of
basic type assignment

162
00:04:52,500 --> 00:04:53,820
that I wanna cover in this video

163
00:04:53,820 --> 00:04:55,980
is going to be null versus undefined.

164
00:04:55,980 --> 00:04:57,120
And if you're used to JavaScript,

165
00:04:57,120 --> 00:04:58,470
you know that null and undefined

166
00:04:58,470 --> 00:05:00,540
are technically different from one another

167
00:05:00,540 --> 00:05:02,670
and it's the exact same
thing in TypeScript.

168
00:05:02,670 --> 00:05:04,680
Null and undefined have their own types

169
00:05:04,680 --> 00:05:05,730
and they work just like that.

170
00:05:05,730 --> 00:05:08,190
So if I were to set this
to null for example,

171
00:05:08,190 --> 00:05:10,890
you can see that a has a
type of explicitly null

172
00:05:10,890 --> 00:05:13,020
because I assigned it to null as the type.

173
00:05:13,020 --> 00:05:14,250
And if I were to try to come in here

174
00:05:14,250 --> 00:05:15,600
and set this to undefined,

175
00:05:15,600 --> 00:05:16,440
I'm going to get an error

176
00:05:16,440 --> 00:05:18,780
because null and undefined
are different from each other

177
00:05:18,780 --> 00:05:21,330
so I cannot redefine it to undefined.

178
00:05:21,330 --> 00:05:22,590
I can make this a little bit more explicit

179
00:05:22,590 --> 00:05:23,610
by coming in here,

180
00:05:23,610 --> 00:05:25,230
manually typing this as null,

181
00:05:25,230 --> 00:05:26,820
and now you can see I'm
getting a TypeScript error

182
00:05:26,820 --> 00:05:28,980
'cause undefined is
not assignable to null.

183
00:05:28,980 --> 00:05:31,440
Same exact thing, if I
set this to undefined

184
00:05:31,440 --> 00:05:34,320
and I make sure I type
this as undefined here,

185
00:05:34,320 --> 00:05:36,000
you'll notice that if I
try to set it to null,

186
00:05:36,000 --> 00:05:37,440
I'm going to get an error.

187
00:05:37,440 --> 00:05:38,520
Now, one thing that you will notice

188
00:05:38,520 --> 00:05:40,470
if I leave off this type inference,

189
00:05:40,470 --> 00:05:42,180
TypeScript doesn't do any type inference

190
00:05:42,180 --> 00:05:44,040
when you set something
to undefined or null

191
00:05:44,040 --> 00:05:44,880
when it's a let variable

192
00:05:44,880 --> 00:05:46,860
'cause it just assumes this
variable doesn't exist.

193
00:05:46,860 --> 00:05:48,660
It could literally be anything at all.

194
00:05:48,660 --> 00:05:49,650
It's essentially the same thing

195
00:05:49,650 --> 00:05:50,910
as if I left it off like this,

196
00:05:50,910 --> 00:05:52,350
a is still undefined.

197
00:05:52,350 --> 00:05:54,000
So if you don't give it an actual type

198
00:05:54,000 --> 00:05:56,100
and you also don't define a default value,

199
00:05:56,100 --> 00:05:57,810
TypeScript doesn't know
what what type to give it,

200
00:05:57,810 --> 00:06:00,000
so it just says it can be any type at all.

201
00:06:00,000 --> 00:06:01,110
So mostly, if you're gonna be dealing

202
00:06:01,110 --> 00:06:03,180
with something that must
be null or undefined,

203
00:06:03,180 --> 00:06:05,040
you're probably going
to explicitly type it

204
00:06:05,040 --> 00:06:06,510
or most likely, you're just going to use

205
00:06:06,510 --> 00:06:08,220
a const variable like this.

206
00:06:08,220 --> 00:06:10,140
And these differences
between null and undefined

207
00:06:10,140 --> 00:06:12,300
are actually a really common cause of bugs

208
00:06:12,300 --> 00:06:13,470
inside a TypeScript programs

209
00:06:13,470 --> 00:06:14,670
'cause something may be null

210
00:06:14,670 --> 00:06:17,460
and you're only checking if
it's undefined or vice versa.

211
00:06:17,460 --> 00:06:18,600
So just make sure you're aware of that

212
00:06:18,600 --> 00:06:20,130
as you're writing your TypeScript code.

213
00:06:20,130 --> 00:06:21,900
The differences between null and undefined

214
00:06:21,900 --> 00:06:23,790
and if a variable is one versus the other,

215
00:06:23,790 --> 00:06:24,990
that's one thing to keep in mind.

216
00:06:24,990 --> 00:06:26,550
That you don't really have
to worry about as much

217
00:06:26,550 --> 00:06:27,850
when you're in JavaScript.