1
00:00:00,020 --> 00:00:02,610
- So here we have the exact
same code from the last video.

2
00:00:02,610 --> 00:00:03,810
And the very first thing I wanna do

3
00:00:03,810 --> 00:00:05,160
is I wanna figure out how can I take

4
00:00:05,160 --> 00:00:07,800
this really long, complex inline type,

5
00:00:07,800 --> 00:00:09,840
extract it out into its own type

6
00:00:09,840 --> 00:00:11,670
which I can actually
use all over the place.

7
00:00:11,670 --> 00:00:14,580
For example, if I had
a "person2" down here,

8
00:00:14,580 --> 00:00:16,260
I wanna set them equal to some value.

9
00:00:16,260 --> 00:00:19,650
I don't wanna have to copy
and paste this type down

10
00:00:19,650 --> 00:00:21,720
and then make sure I update
all of these in the same place.

11
00:00:21,720 --> 00:00:24,330
I just wanna use one type
where everything is defined.

12
00:00:24,330 --> 00:00:25,470
So in order to do that,

13
00:00:25,470 --> 00:00:26,430
what we can do is we can come up

14
00:00:26,430 --> 00:00:27,630
to the very top of our file.

15
00:00:27,630 --> 00:00:29,670
Generally, at the top of
the file is where I like

16
00:00:29,670 --> 00:00:31,860
to define my types, or at the very least,

17
00:00:31,860 --> 00:00:34,560
I like to define them right
before they're going to be used.

18
00:00:34,560 --> 00:00:35,997
And what you can do is
you can define a type.

19
00:00:35,997 --> 00:00:37,830
And to do that you just
type in the word "type"

20
00:00:37,830 --> 00:00:38,663
just like that.

21
00:00:38,663 --> 00:00:40,500
It's just like you would
define a constant variable.

22
00:00:40,500 --> 00:00:42,120
We're instead defining a type.

23
00:00:42,120 --> 00:00:44,160
This is something that
only works in TypeScript

24
00:00:44,160 --> 00:00:46,410
'cause JavaScript has no type property.

25
00:00:46,410 --> 00:00:48,000
So if you type in the word "type,"

26
00:00:48,000 --> 00:00:49,980
then we can type in the name of our type.

27
00:00:49,980 --> 00:00:50,970
The important thing here to note

28
00:00:50,970 --> 00:00:53,430
is that almost always when
you're using TypeScript,

29
00:00:53,430 --> 00:00:55,350
your types are going to be in camel case

30
00:00:55,350 --> 00:00:57,330
where the first letter is capitalized.

31
00:00:57,330 --> 00:00:59,130
This would be a person type.

32
00:00:59,130 --> 00:01:01,770
If for example my type
was called "person name,"

33
00:01:01,770 --> 00:01:02,700
it would look like this

34
00:01:02,700 --> 00:01:04,860
where it's camel cased
with all capital letters.

35
00:01:04,860 --> 00:01:06,120
The very first one's capitalized.

36
00:01:06,120 --> 00:01:08,070
The second word's capitalized and so on.

37
00:01:08,070 --> 00:01:09,630
This is kind of the opposite of JavaScript

38
00:01:09,630 --> 00:01:11,310
where you leave the first lowercase.

39
00:01:11,310 --> 00:01:13,350
But this is how I would
write this in JavaScript.

40
00:01:13,350 --> 00:01:14,970
But if I'm creating a type in TypeScript,

41
00:01:14,970 --> 00:01:16,980
you almost always are gonna
be using capital letters

42
00:01:16,980 --> 00:01:19,200
for the very first letter of each word.

43
00:01:19,200 --> 00:01:21,090
Then if you're using a type like this,

44
00:01:21,090 --> 00:01:23,370
all I say is I want my
type to equal some value,

45
00:01:23,370 --> 00:01:25,110
just like you would do in JavaScript.

46
00:01:25,110 --> 00:01:26,490
And here is where you put everything

47
00:01:26,490 --> 00:01:27,720
that would come after your colon.

48
00:01:27,720 --> 00:01:29,280
So I'm just gonna copy all of this.

49
00:01:29,280 --> 00:01:30,990
I'm gonna paste it down right here.

50
00:01:30,990 --> 00:01:33,600
And then instead of the
actual full type here,

51
00:01:33,600 --> 00:01:36,030
I can just write out what the
name of my type variable is.

52
00:01:36,030 --> 00:01:37,800
I've created this type variable "person."

53
00:01:37,800 --> 00:01:39,420
I can define this person as that.

54
00:01:39,420 --> 00:01:40,350
Same thing here.

55
00:01:40,350 --> 00:01:42,030
I can define this as a person as well.

56
00:01:42,030 --> 00:01:43,110
This is going to give me some errors

57
00:01:43,110 --> 00:01:44,640
'cause I don't have a
name or anything defined

58
00:01:44,640 --> 00:01:45,750
for this person.

59
00:01:45,750 --> 00:01:49,703
So let's give them a name
of Sally and an age of 23.

60
00:01:51,690 --> 00:01:52,523
There we go.

61
00:01:52,523 --> 00:01:53,640
Now I give that a quick save.

62
00:01:53,640 --> 00:01:55,200
You can see we have no errors anywhere.

63
00:01:55,200 --> 00:01:57,420
When I hover over my person,
you can see it explains

64
00:01:57,420 --> 00:01:58,950
that this is what my type looks like,

65
00:01:58,950 --> 00:02:00,930
which is the exact same type I had before,

66
00:02:00,930 --> 00:02:03,567
and my person is now
set to this person type.

67
00:02:03,567 --> 00:02:06,180
And this is really cool
because now I have the ability

68
00:02:06,180 --> 00:02:07,230
to extract this type out.

69
00:02:07,230 --> 00:02:09,690
So for example, if I wanted
to add something to this,

70
00:02:09,690 --> 00:02:11,550
for example, I wanted to add some friends,

71
00:02:11,550 --> 00:02:13,950
and the friend is just going
to be an array of strings.

72
00:02:13,950 --> 00:02:16,200
So we'll say it's gonna be a
string array just like that.

73
00:02:16,200 --> 00:02:18,120
You can now see that I have
an error on both of these

74
00:02:18,120 --> 00:02:20,610
'cause both of them are
missing that friend's property.

75
00:02:20,610 --> 00:02:21,510
I could just come in here,

76
00:02:21,510 --> 00:02:24,300
say that friend is going to
be equal to an empty array.

77
00:02:24,300 --> 00:02:26,760
And same thing here, friends
is equal to an empty array.

78
00:02:26,760 --> 00:02:28,890
And now that's going to work just fine.

79
00:02:28,890 --> 00:02:31,020
Another really cool
thing about using types

80
00:02:31,020 --> 00:02:33,660
is I can actually use nested
objects inside of here.

81
00:02:33,660 --> 00:02:34,830
You can do that in line as well,

82
00:02:34,830 --> 00:02:36,780
but it becomes a huge mess to deal with.

83
00:02:36,780 --> 00:02:39,360
So for example, I could
have an address property.

84
00:02:39,360 --> 00:02:41,010
And in this address I could have a street

85
00:02:41,010 --> 00:02:42,900
which is going to be a string.

86
00:02:42,900 --> 00:02:45,780
And now what I can do is
I can add in an address

87
00:02:45,780 --> 00:02:47,190
and I can add in a street,

88
00:02:47,190 --> 00:02:49,680
which we'll just say like, "Main st."

89
00:02:49,680 --> 00:02:50,513
There we go.

90
00:02:50,513 --> 00:02:51,450
We can just comment the second person out

91
00:02:51,450 --> 00:02:53,100
so we don't have to
worry about those errors.

92
00:02:53,100 --> 00:02:54,720
This is something really
important to understand

93
00:02:54,720 --> 00:02:56,130
because almost every time

94
00:02:56,130 --> 00:02:57,660
that you're creating an object type,

95
00:02:57,660 --> 00:02:59,490
for example, this person object type,

96
00:02:59,490 --> 00:03:01,800
you're gonna wanna do it
as an actual type variable

97
00:03:01,800 --> 00:03:02,940
instead of doing it inline

98
00:03:02,940 --> 00:03:05,370
just because it makes your
code a lot easier to read.

99
00:03:05,370 --> 00:03:07,470
Because this is not
too hard to understand.

100
00:03:07,470 --> 00:03:08,970
But if I were to copy this down

101
00:03:08,970 --> 00:03:10,920
and replace this person here like this,

102
00:03:10,920 --> 00:03:14,010
this is much more difficult to
understand what is going on,

103
00:03:14,010 --> 00:03:15,900
and I can't reuse it anywhere else,

104
00:03:15,900 --> 00:03:17,880
which is why, again, almost
always if you're gonna be doing

105
00:03:17,880 --> 00:03:19,710
a long, complex object type like this,

106
00:03:19,710 --> 00:03:22,110
it makes sense to extract it into a type.

107
00:03:22,110 --> 00:03:24,300
Now the really great thing
about a type in TypeScript

108
00:03:24,300 --> 00:03:25,950
is that you can use it
with literally anything.

109
00:03:25,950 --> 00:03:27,240
Like I said, all you do is you take

110
00:03:27,240 --> 00:03:28,680
whatever's after the colon,

111
00:03:28,680 --> 00:03:30,360
and you put that right
after the equal sign.

112
00:03:30,360 --> 00:03:31,590
So for example, I could say that this

113
00:03:31,590 --> 00:03:32,940
is going to be a number.

114
00:03:32,940 --> 00:03:35,130
Now, if I were to actually
set this to a number

115
00:03:35,130 --> 00:03:36,750
by just saying "3" here, for example,

116
00:03:36,750 --> 00:03:39,030
you can see that my person
type is set to a number,

117
00:03:39,030 --> 00:03:40,950
so my person here is just a number,

118
00:03:40,950 --> 00:03:41,783
and that's going to work fine.

119
00:03:41,783 --> 00:03:44,160
If I change it to a string,
obviously it's going to fail.

120
00:03:44,160 --> 00:03:47,220
So types work by just replacing
whatever is after the colon

121
00:03:47,220 --> 00:03:48,600
with the actual type name

122
00:03:48,600 --> 00:03:50,610
and then taking what used
to be after that colon

123
00:03:50,610 --> 00:03:52,530
and putting it after the
equal sign for the type.

124
00:03:52,530 --> 00:03:54,630
It's relatively straightforward to create.

125
00:03:54,630 --> 00:03:56,970
Now let's go back to when we
had an actual person object,

126
00:03:56,970 --> 00:03:58,860
and we're gonna talk about interfaces next

127
00:03:58,860 --> 00:04:01,770
because interfaces are
nearly identical to types,

128
00:04:01,770 --> 00:04:03,510
but there are a few minor differences

129
00:04:03,510 --> 00:04:04,890
you need to understand.

130
00:04:04,890 --> 00:04:06,300
So to change something to an interface,

131
00:04:06,300 --> 00:04:07,230
instead of using type,

132
00:04:07,230 --> 00:04:08,880
we're just gonna say "interface" here.

133
00:04:08,880 --> 00:04:10,530
So we'll say "interface" like that.

134
00:04:10,530 --> 00:04:12,360
And we actually remove the equal sign.

135
00:04:12,360 --> 00:04:13,193
And the reason we do that

136
00:04:13,193 --> 00:04:16,200
is because interfaces can
only be used with objects.

137
00:04:16,200 --> 00:04:17,460
It must be used with something

138
00:04:17,460 --> 00:04:19,500
that is some type of object type.

139
00:04:19,500 --> 00:04:20,640
In our case we have this object

140
00:04:20,640 --> 00:04:22,680
that has a name and age and so on.

141
00:04:22,680 --> 00:04:24,270
So that's how an interface works.

142
00:04:24,270 --> 00:04:25,320
But the one downside to this

143
00:04:25,320 --> 00:04:27,840
is there's no way for me to
set this interface to a number

144
00:04:27,840 --> 00:04:29,100
because it only works with objects.

145
00:04:29,100 --> 00:04:30,450
Like, I can't just say "number" here,

146
00:04:30,450 --> 00:04:31,470
and I can't say equal number.

147
00:04:31,470 --> 00:04:32,640
None of those are gonna work.

148
00:04:32,640 --> 00:04:34,590
It must be used with an object type.

149
00:04:34,590 --> 00:04:36,240
The only difference when you create them

150
00:04:36,240 --> 00:04:38,310
is that you use the word
"interface" instead of "type,"

151
00:04:38,310 --> 00:04:39,960
and you don't have an equal sign anymore

152
00:04:39,960 --> 00:04:41,520
because you're not actually
setting it to something.

153
00:04:41,520 --> 00:04:44,790
You're just defining this
interface in line like this.

154
00:04:44,790 --> 00:04:47,370
Now other than that, when
you actually use the two,

155
00:04:47,370 --> 00:04:48,630
they work exactly the same.

156
00:04:48,630 --> 00:04:50,880
So it doesn't matter if
something's an interface or a type.

157
00:04:50,880 --> 00:04:53,430
When you actually set it
to a variable like this,

158
00:04:53,430 --> 00:04:55,290
this person is set to this person type,

159
00:04:55,290 --> 00:04:56,910
it doesn't matter because
it's going to work

160
00:04:56,910 --> 00:04:58,170
exactly the same.

161
00:04:58,170 --> 00:04:59,580
You don't have to worry
about the differences

162
00:04:59,580 --> 00:05:01,320
between the two when you're using them.

163
00:05:01,320 --> 00:05:03,540
But when you define them, there
are some minor differences

164
00:05:03,540 --> 00:05:05,220
like you see here that
you need to know about.

165
00:05:05,220 --> 00:05:06,600
And there's some other minor differences

166
00:05:06,600 --> 00:05:08,190
we're gonna talk about
later in this course

167
00:05:08,190 --> 00:05:10,350
which aren't super important right now.

168
00:05:10,350 --> 00:05:12,120
Now when it comes to which one to choose,

169
00:05:12,120 --> 00:05:13,830
again, it's entirely personal preference,

170
00:05:13,830 --> 00:05:16,710
but I generally lean
more towards using a type

171
00:05:16,710 --> 00:05:18,751
instead of an interface for two reasons.

172
00:05:18,751 --> 00:05:21,570
One, I just like the
keyword of "type" better,

173
00:05:21,570 --> 00:05:24,030
and I like the way that you
can extend types and so on,

174
00:05:24,030 --> 00:05:25,320
which we'll cover later in this course,

175
00:05:25,320 --> 00:05:26,850
a little bit better than interfaces.

176
00:05:26,850 --> 00:05:28,770
But secondly, and
probably most importantly,

177
00:05:28,770 --> 00:05:30,150
is a type is much more flexible

178
00:05:30,150 --> 00:05:32,310
because I don't have to just use objects.

179
00:05:32,310 --> 00:05:34,290
I can set it to something
like a number instead,

180
00:05:34,290 --> 00:05:36,510
and that's, again,
going to work just fine.

181
00:05:36,510 --> 00:05:38,100
That's one reason that I like to use types

182
00:05:38,100 --> 00:05:39,000
instead of interfaces.

183
00:05:39,000 --> 00:05:40,530
But you can use whatever you prefer

184
00:05:40,530 --> 00:05:42,270
because, again, they're
both interchangeable,

185
00:05:42,270 --> 00:05:44,070
and you can use them in
all of the same places

186
00:05:44,070 --> 00:05:46,290
except for the case where
you want to set an interface

187
00:05:46,290 --> 00:05:48,450
to a specific value
like a number or string.

188
00:05:48,450 --> 00:05:49,473
That doesn't work.