1
00:00:00,000 --> 00:00:01,800
- Now this video is going
to be a little bit longer

2
00:00:01,800 --> 00:00:03,720
'cause we need to cover
everything you need to know

3
00:00:03,720 --> 00:00:05,820
about how you type a function.

4
00:00:05,820 --> 00:00:07,830
Let's say we just have
a really simple function

5
00:00:07,830 --> 00:00:08,793
that's called printName.

6
00:00:08,793 --> 00:00:10,620
It's gonna take in a name

7
00:00:10,620 --> 00:00:13,710
and then it's just gonna
console.log that name out.

8
00:00:13,710 --> 00:00:15,840
Now immediately by defining
this function as is,

9
00:00:15,840 --> 00:00:18,630
we're gonna get some errors
because we need to define types

10
00:00:18,630 --> 00:00:20,490
for what the actual parameters are

11
00:00:20,490 --> 00:00:21,930
that you pass this function.

12
00:00:21,930 --> 00:00:23,970
For example, this name
variable doesn't have a type.

13
00:00:23,970 --> 00:00:25,260
It's implicitly set to any

14
00:00:25,260 --> 00:00:27,660
which we do not allow in our config.

15
00:00:27,660 --> 00:00:30,180
So to type a parameter
inside of a function

16
00:00:30,180 --> 00:00:31,800
is just like with a variable,

17
00:00:31,800 --> 00:00:34,530
you put a colon followed by
the type of that variable.

18
00:00:34,530 --> 00:00:35,940
In our case, our name is a string

19
00:00:35,940 --> 00:00:37,950
so we can print it out just like that.

20
00:00:37,950 --> 00:00:39,180
That's how we type this function,

21
00:00:39,180 --> 00:00:40,350
it's pretty straightforward.

22
00:00:40,350 --> 00:00:41,520
If we add another parameter,

23
00:00:41,520 --> 00:00:43,440
for example, we have name2 on here,

24
00:00:43,440 --> 00:00:45,840
we just need to separate it
by a comma, just like normal,

25
00:00:45,840 --> 00:00:46,980
and then we can put the type

26
00:00:46,980 --> 00:00:49,080
and now we can print
out both of these names

27
00:00:49,080 --> 00:00:51,240
and you can see our code
is working just fine.

28
00:00:51,240 --> 00:00:53,430
So if you wanna type a
parameter, just put a colon

29
00:00:53,430 --> 00:00:56,340
followed by the actual
type of that parameter,

30
00:00:56,340 --> 00:00:58,050
relatively straightforward.

31
00:00:58,050 --> 00:00:59,070
Let's create a new function though

32
00:00:59,070 --> 00:01:00,300
so we can talk about how you type

33
00:01:00,300 --> 00:01:02,220
the return type of a function.

34
00:01:02,220 --> 00:01:04,950
This is gonna take a and b,
which are both gonna be numbers,

35
00:01:04,950 --> 00:01:08,343
so we're just gonna type
this as is, just like that.

36
00:01:09,210 --> 00:01:13,050
And then inside of here,
we're just gonna return a + b.

37
00:01:13,050 --> 00:01:18,050
So now let's just say const_c
is equal to sum (1, 2)

38
00:01:18,330 --> 00:01:20,280
Now if we hover over c
you can see TypeScript

39
00:01:20,280 --> 00:01:22,860
somehow knows that c is a number.

40
00:01:22,860 --> 00:01:24,270
We'd never actually defined

41
00:01:24,270 --> 00:01:26,460
a return type for our sum function,

42
00:01:26,460 --> 00:01:29,340
but since TypeScript does
inference, it actually knows

43
00:01:29,340 --> 00:01:31,560
that the return type of
sum is going to be a number

44
00:01:31,560 --> 00:01:33,720
'cause when you add one
number to another number

45
00:01:33,720 --> 00:01:35,100
it returns a number.

46
00:01:35,100 --> 00:01:37,230
And if we hover over our
function, we can actually see that

47
00:01:37,230 --> 00:01:39,750
'cause here you can see we
have our function being defined

48
00:01:39,750 --> 00:01:40,890
and you can see the return type

49
00:01:40,890 --> 00:01:42,750
at the very end of the parentheses here.

50
00:01:42,750 --> 00:01:45,720
That's actually how we manually
define our own return type.

51
00:01:45,720 --> 00:01:47,460
So if I wanted to explicitly tell

52
00:01:47,460 --> 00:01:49,230
the return type of my sum function,

53
00:01:49,230 --> 00:01:50,940
I would just put a colon followed by

54
00:01:50,940 --> 00:01:52,320
what I want the return type to be.

55
00:01:52,320 --> 00:01:54,360
In our case, it is a return type of number

56
00:01:54,360 --> 00:01:56,700
and now that's going to work just fine.

57
00:01:56,700 --> 00:01:59,820
Now when you're dealing with
return types and functions,

58
00:01:59,820 --> 00:02:03,180
I highly recommend that you
never actually explicitly

59
00:02:03,180 --> 00:02:05,160
define the type of the return type

60
00:02:05,160 --> 00:02:07,320
unless you absolutely need to.

61
00:02:07,320 --> 00:02:10,050
But in 99.9% of scenarios,

62
00:02:10,050 --> 00:02:12,690
the inferred type is going
to be plenty good for you

63
00:02:12,690 --> 00:02:13,890
and it's going to be even better

64
00:02:13,890 --> 00:02:15,060
because now if, for example,

65
00:02:15,060 --> 00:02:17,640
I would've changed my
return here to be a string,

66
00:02:17,640 --> 00:02:19,200
my code is just gonna be
smart enough to know that

67
00:02:19,200 --> 00:02:20,580
now c is going to be a string,

68
00:02:20,580 --> 00:02:21,960
I don't have to manually come in here

69
00:02:21,960 --> 00:02:23,970
and change this to a string from a number,

70
00:02:23,970 --> 00:02:26,280
it's just smart enough to
infer all of that for me.

71
00:02:26,280 --> 00:02:27,270
Essentially in TypeScript

72
00:02:27,270 --> 00:02:29,220
when you can infer something and it works,

73
00:02:29,220 --> 00:02:31,260
almost always go with the inference route

74
00:02:31,260 --> 00:02:33,630
because it's just going
to be easier to maintain

75
00:02:33,630 --> 00:02:36,510
and it's gonna be more
flexible for future changes.

76
00:02:36,510 --> 00:02:37,740
Now another thing I want to talk about

77
00:02:37,740 --> 00:02:38,730
when it comes to functions

78
00:02:38,730 --> 00:02:41,550
is how you deal with passing
objects to a function.

79
00:02:41,550 --> 00:02:43,110
Let's say here we're
gonna change this function

80
00:02:43,110 --> 00:02:46,457
to be printName, actually
we'll just say printPerson.

81
00:02:48,040 --> 00:02:51,210
There we go and this is
gonna take in a person object

82
00:02:51,210 --> 00:02:53,387
and it's just gonna console
out log(person.name).

83
00:02:54,330 --> 00:02:56,760
Now in our case, we need to
define a type for this person,

84
00:02:56,760 --> 00:02:59,910
we can do this in line or by
creating another type object.

85
00:02:59,910 --> 00:03:01,230
We're just gonna do it in line real quick

86
00:03:01,230 --> 00:03:03,900
and what I can do is I can
say here we have a name

87
00:03:03,900 --> 00:03:04,800
which is a string,

88
00:03:04,800 --> 00:03:07,410
that's the only thing I care
about on this person object.

89
00:03:07,410 --> 00:03:09,990
Now if I were to just call
print person down here,

90
00:03:09,990 --> 00:03:13,230
we can come in and we can pass
it a name, for example, Kyle

91
00:03:13,230 --> 00:03:14,610
and now you can see we have no errors,

92
00:03:14,610 --> 00:03:15,690
everything's working fine

93
00:03:15,690 --> 00:03:18,150
and it knows that this name is a string.

94
00:03:18,150 --> 00:03:20,130
Now there's some interesting
things about objects though

95
00:03:20,130 --> 00:03:21,390
that you need to understand.

96
00:03:21,390 --> 00:03:22,770
If I were to try to pass a property

97
00:03:22,770 --> 00:03:24,780
that's not inside of this type right here,

98
00:03:24,780 --> 00:03:25,950
I'm going to get an O error.

99
00:03:25,950 --> 00:03:27,930
So for example, if I say age is 28,

100
00:03:27,930 --> 00:03:29,167
you can see I'm getting
an error 'cause it's like,

101
00:03:29,167 --> 00:03:31,350
"Hey, you're passing
along this age property,

102
00:03:31,350 --> 00:03:33,660
but this age property
doesn't actually exist

103
00:03:33,660 --> 00:03:35,940
on this person object right here."

104
00:03:35,940 --> 00:03:37,080
And this is a really nice warning

105
00:03:37,080 --> 00:03:39,900
because when you're manually
typing in your actual object

106
00:03:39,900 --> 00:03:41,220
and passing it to a function,

107
00:03:41,220 --> 00:03:43,860
so it's not an object from a
variable from other sources,

108
00:03:43,860 --> 00:03:46,590
it's just an object that you
manually type in right here,

109
00:03:46,590 --> 00:03:47,580
Typescript is gonna warn you

110
00:03:47,580 --> 00:03:49,410
if you accidentally add parameters

111
00:03:49,410 --> 00:03:50,970
that are not meant to be there.

112
00:03:50,970 --> 00:03:51,900
And that's because maybe

113
00:03:51,900 --> 00:03:53,730
I accidentally typed name wrong here,

114
00:03:53,730 --> 00:03:55,350
for example, I did like this

115
00:03:55,350 --> 00:03:57,007
and it would actually give me
that warning letting me know,

116
00:03:57,007 --> 00:03:58,500
"Hey this property doesn't exist,

117
00:03:58,500 --> 00:04:00,780
most likely it's 'cause
you typed something wrong."

118
00:04:00,780 --> 00:04:02,220
But if I were to change this

119
00:04:02,220 --> 00:04:04,050
and I extract this out into a variable,

120
00:04:04,050 --> 00:04:06,480
for example, I just create
a variable called person

121
00:04:06,480 --> 00:04:07,740
and I set it equal to this

122
00:04:07,740 --> 00:04:09,810
and I pass this person along to here,

123
00:04:09,810 --> 00:04:12,630
you're gonna notice we no
longer get those same errors.

124
00:04:12,630 --> 00:04:13,620
So this is kind of interesting

125
00:04:13,620 --> 00:04:15,570
because I'm passing the exact same object

126
00:04:15,570 --> 00:04:16,950
to this printPerson function

127
00:04:16,950 --> 00:04:18,690
and in this scenario I'm getting no errors

128
00:04:18,690 --> 00:04:20,970
even though I'm passing
along additional information

129
00:04:20,970 --> 00:04:23,190
that's not included in my person type.

130
00:04:23,190 --> 00:04:26,370
While when I actually hard
code my object into here,

131
00:04:26,370 --> 00:04:27,900
you notice I get this error.

132
00:04:27,900 --> 00:04:30,300
This is actually a really
nice feature of TypeScript.

133
00:04:30,300 --> 00:04:31,740
The reason that you don't get an error

134
00:04:31,740 --> 00:04:33,330
in this specific scenario

135
00:04:33,330 --> 00:04:35,970
is because this person object
could have other properties

136
00:04:35,970 --> 00:04:37,530
on it that it just doesn't really matter

137
00:04:37,530 --> 00:04:39,060
if those get passed down or not

138
00:04:39,060 --> 00:04:40,470
because TypeScript is
a little bit different

139
00:04:40,470 --> 00:04:42,060
than like a super strict type language

140
00:04:42,060 --> 00:04:43,650
that you may have used in the past.

141
00:04:43,650 --> 00:04:45,780
TypeScript only looks at the structure

142
00:04:45,780 --> 00:04:48,420
of your objects to determine
if they are the correct type.

143
00:04:48,420 --> 00:04:50,880
So if the object we're passing along

144
00:04:50,880 --> 00:04:53,310
has a name with a string,
it's going to be fine.

145
00:04:53,310 --> 00:04:54,143
It doesn't matter

146
00:04:54,143 --> 00:04:56,640
if it has a million other
properties defined on it

147
00:04:56,640 --> 00:04:58,710
as long as it has a
name which is a string,

148
00:04:58,710 --> 00:05:01,170
that is the only thing that
TypeScript cares about.

149
00:05:01,170 --> 00:05:03,450
So in that case, they are
essentially the same type

150
00:05:03,450 --> 00:05:05,400
for this printPerson function.

151
00:05:05,400 --> 00:05:06,630
Now the reason it doesn't work

152
00:05:06,630 --> 00:05:08,910
when you hard code this
value in there though

153
00:05:08,910 --> 00:05:10,260
is because TypeScript knows

154
00:05:10,260 --> 00:05:13,290
that you're explicitly
passing in this age property,

155
00:05:13,290 --> 00:05:14,940
it's not coming from another object

156
00:05:14,940 --> 00:05:16,110
somewhere else that may have

157
00:05:16,110 --> 00:05:18,450
these properties added
on for some other reason.

158
00:05:18,450 --> 00:05:20,280
You're explicitly telling the code,

159
00:05:20,280 --> 00:05:23,130
I want to pass an age property
in here and TypeScript knows

160
00:05:23,130 --> 00:05:25,650
that this is probably not
something you want to do.

161
00:05:25,650 --> 00:05:28,830
Now technically the actual
TypeScript code itself,

162
00:05:28,830 --> 00:05:30,870
the difference between this and this

163
00:05:30,870 --> 00:05:32,880
where you actually passed
on the person like that,

164
00:05:32,880 --> 00:05:34,980
these are the exact same things of code

165
00:05:34,980 --> 00:05:36,840
for actual like JavaScript
running purposes,

166
00:05:36,840 --> 00:05:38,370
they'll do the exact same thing.

167
00:05:38,370 --> 00:05:40,290
The reason, again, TypeScript
throws this error here

168
00:05:40,290 --> 00:05:41,820
is because you're explicitly telling it

169
00:05:41,820 --> 00:05:43,560
that you're trying to pass down an age,

170
00:05:43,560 --> 00:05:45,660
but this doesn't deal with ages at all.

171
00:05:45,660 --> 00:05:46,650
And this is just helping you

172
00:05:46,650 --> 00:05:48,510
in case you accidentally make a typo.

173
00:05:48,510 --> 00:05:50,070
So for example in that same scenario,

174
00:05:50,070 --> 00:05:52,320
if I were to like spell
name incorrectly here

175
00:05:52,320 --> 00:05:53,587
it essentially is letting me know like,

176
00:05:53,587 --> 00:05:56,430
"Hey, you've actually probably
spelled something wrong"

177
00:05:56,430 --> 00:05:58,050
and when you're trying
to pass down a property

178
00:05:58,050 --> 00:05:59,160
that doesn't actually exist,

179
00:05:59,160 --> 00:06:01,890
it's really just there to
help you as a developer

180
00:06:01,890 --> 00:06:04,110
not so much to like guarantee
your code is correct.

181
00:06:04,110 --> 00:06:06,090
And that's kind of a thing
with TypeScript overall.

182
00:06:06,090 --> 00:06:08,400
A lot of times you can write
correct JavaScript code,

183
00:06:08,400 --> 00:06:09,960
but TypeScript will still throw errors

184
00:06:09,960 --> 00:06:10,793
because it's saying,

185
00:06:10,793 --> 00:06:12,000
"Hey, you probably did something wrong

186
00:06:12,000 --> 00:06:13,500
that you didn't mean to do."

187
00:06:13,500 --> 00:06:15,630
So just know the differences
between these two,

188
00:06:15,630 --> 00:06:17,730
since TypeScript is structural based

189
00:06:17,730 --> 00:06:19,230
that means if you write code like this

190
00:06:19,230 --> 00:06:21,000
it's going to work fine
because it's all it cares

191
00:06:21,000 --> 00:06:22,770
is that we have this name property.

192
00:06:22,770 --> 00:06:23,970
But in specific scenarios

193
00:06:23,970 --> 00:06:25,890
when you're passing down an explicit value

194
00:06:25,890 --> 00:06:27,453
that has this like age, for example,

195
00:06:27,453 --> 00:06:29,190
when we pass it down here,

196
00:06:29,190 --> 00:06:31,500
it's just doing a simple extra check

197
00:06:31,500 --> 00:06:34,170
just to make sure that your
code is going to be working fine

198
00:06:34,170 --> 00:06:35,160
and that you didn't accidentally

199
00:06:35,160 --> 00:06:36,870
spell something incorrectly.

200
00:06:36,870 --> 00:06:39,060
Other than that though,
functions are relatively similar

201
00:06:39,060 --> 00:06:40,380
to how you define variables.

202
00:06:40,380 --> 00:06:41,460
You just create your parameter

203
00:06:41,460 --> 00:06:42,480
and then follow it by a colon

204
00:06:42,480 --> 00:06:44,100
and if we were to
extract this into a type,

205
00:06:44,100 --> 00:06:46,200
for example, we wanna
define a person type,

206
00:06:46,200 --> 00:06:47,250
that's really simple as well.

207
00:06:47,250 --> 00:06:50,490
We would just say type person is equal to

208
00:06:50,490 --> 00:06:52,620
paste down that person type, there we go.

209
00:06:52,620 --> 00:06:54,540
And now you can see that
that is working just fine

210
00:06:54,540 --> 00:06:56,740
especially if we remove
this age right here.