1
00:00:00,210 --> 00:00:02,619
- Now one really common thing
that you do in JavaScript

2
00:00:02,619 --> 00:00:05,520
is you pass functions
around to other functions

3
00:00:05,520 --> 00:00:07,459
or you just deal with
functions a lot in JavaScript

4
00:00:07,459 --> 00:00:10,200
since it's a very
function forward language.

5
00:00:10,200 --> 00:00:13,310
But how exactly do you type
something as a function?

6
00:00:13,310 --> 00:00:15,180
In this case we have this sum function

7
00:00:15,180 --> 00:00:16,140
we've been dealing with before

8
00:00:16,140 --> 00:00:18,303
but this is one that
specifically takes in a callback.

9
00:00:18,303 --> 00:00:20,878
This cb is a callback
function that we just pass

10
00:00:20,878 --> 00:00:24,638
whatever a + b is to
that callback function.

11
00:00:24,638 --> 00:00:27,278
So how would we go about
writing the type for this?

12
00:00:27,278 --> 00:00:29,280
You may just think it's
as simple as saying

13
00:00:29,280 --> 00:00:31,110
that this is a function,

14
00:00:31,110 --> 00:00:32,220
and that would be all you need to do.

15
00:00:32,220 --> 00:00:35,049
And technically that's going
to work as you can see here.

16
00:00:35,049 --> 00:00:37,260
But function is not the way that you want

17
00:00:37,260 --> 00:00:39,030
to define what a function looks like.

18
00:00:39,030 --> 00:00:40,710
For example, if I come
in here and I call this

19
00:00:40,710 --> 00:00:44,340
with 1, 2, and a function inside of here,

20
00:00:44,340 --> 00:00:47,700
which will just say console.log the sum,

21
00:00:47,700 --> 00:00:49,560
and sum is coming directly from here.

22
00:00:49,560 --> 00:00:51,540
There we go, you can see I'm
getting a bunch of errors

23
00:00:51,540 --> 00:00:53,760
'cause it doesn't know
that this has a parameter.

24
00:00:53,760 --> 00:00:55,620
As you can see, this
implicitly has a type of any

25
00:00:55,620 --> 00:00:57,900
so it doesn't know what
this sum variable is.

26
00:00:57,900 --> 00:00:59,610
That's 'cause this function
is just a generic thing

27
00:00:59,610 --> 00:01:00,510
that says it's a function,

28
00:01:00,510 --> 00:01:02,580
it can take any number of any parameters

29
00:01:02,580 --> 00:01:03,810
and it can return anything.

30
00:01:03,810 --> 00:01:06,120
I have no idea, I have
no information about it.

31
00:01:06,120 --> 00:01:08,367
So if you wanna get more
specific about what a function is

32
00:01:08,367 --> 00:01:10,110
you essentially need to tell it

33
00:01:10,110 --> 00:01:12,120
what that function looks like
and it looks very similar

34
00:01:12,120 --> 00:01:13,571
to how you write an arrow function.

35
00:01:13,571 --> 00:01:15,240
So what we can do to define something

36
00:01:15,240 --> 00:01:17,640
as a function is we can use
these parentheses here to say

37
00:01:17,640 --> 00:01:19,322
that this is where the parameters will go.

38
00:01:19,322 --> 00:01:21,780
Then we'll use an arrow finally followed

39
00:01:21,780 --> 00:01:23,400
by whatever the return type is.

40
00:01:23,400 --> 00:01:25,080
In our case this callback function

41
00:01:25,080 --> 00:01:26,640
is not returning anything at all.

42
00:01:26,640 --> 00:01:29,490
So we can just say the
return type here is void.

43
00:01:29,490 --> 00:01:30,600
And as for the parameters

44
00:01:30,600 --> 00:01:32,130
we know it's going to take one parameter.

45
00:01:32,130 --> 00:01:33,120
We can call it whatever we want.

46
00:01:33,120 --> 00:01:34,729
In our case, we know
it's going to be a sum.

47
00:01:34,729 --> 00:01:37,230
This is going to be a number.

48
00:01:37,230 --> 00:01:38,700
So now we have typed this callback

49
00:01:38,700 --> 00:01:39,690
by saying that this callback

50
00:01:39,690 --> 00:01:41,340
is a function that takes one parameter.

51
00:01:41,340 --> 00:01:43,080
That one parameter is a number

52
00:01:43,080 --> 00:01:45,586
and it's going to return
nothing, in our case void.

53
00:01:45,586 --> 00:01:47,490
Now if we look at our
code where we called it

54
00:01:47,490 --> 00:01:48,960
you can see when we hover over sum,

55
00:01:48,960 --> 00:01:51,321
it specifically has a
type of number to it.

56
00:01:51,321 --> 00:01:53,370
And if for some reason I tried to say

57
00:01:53,370 --> 00:01:57,292
that this has multiple
parameters, so for example param2,

58
00:01:57,292 --> 00:01:59,370
now you can see I'm getting
an error essentially saying

59
00:01:59,370 --> 00:02:02,340
hey, there is no param2
in my callback type.

60
00:02:02,340 --> 00:02:04,110
I would need to manually come in here

61
00:02:04,110 --> 00:02:06,600
and add some other type
onto the end of here

62
00:02:06,600 --> 00:02:08,700
saying that there is a second parameter.

63
00:02:08,700 --> 00:02:10,380
Now the one really nice
thing about JavaScript

64
00:02:10,380 --> 00:02:12,420
is you can call a function
with any number of arguments.

65
00:02:12,420 --> 00:02:15,205
So here, if I wanted to not
care about the sum argument

66
00:02:15,205 --> 00:02:17,280
I could just remove that argument.

67
00:02:17,280 --> 00:02:18,906
And as you can see, it's
still going to work fine.

68
00:02:18,906 --> 00:02:21,720
You just need to make sure you
pass the number of parameters

69
00:02:21,720 --> 00:02:24,473
to the function or less, just
like normal JavaScript works.

70
00:02:24,473 --> 00:02:27,120
So here you can see I can
take in that sum function

71
00:02:27,120 --> 00:02:29,164
if I want, which of
course in this case I do.

72
00:02:29,164 --> 00:02:30,990
So anytime you're typing a function

73
00:02:30,990 --> 00:02:32,376
it looks just like an arrow function.

74
00:02:32,376 --> 00:02:34,896
We can show another example
where we just create a type

75
00:02:34,896 --> 00:02:38,451
which is just going to be a PrintNameFunc.

76
00:02:38,451 --> 00:02:40,325
There we go, to integrate this type

77
00:02:40,325 --> 00:02:42,240
all we need to do is come in here.

78
00:02:42,240 --> 00:02:44,250
We know that this is going to return void.

79
00:02:44,250 --> 00:02:46,140
We'll say void, and this takes in a name

80
00:02:46,140 --> 00:02:48,565
which is a type of string, just like that.

81
00:02:48,565 --> 00:02:50,160
Now if there are no parameters

82
00:02:50,160 --> 00:02:51,540
you just leave this completely blank.

83
00:02:51,540 --> 00:02:53,444
So this would be a function
that takes no parameters.

84
00:02:53,444 --> 00:02:56,163
So for example, a function
that looks like this,

85
00:02:58,170 --> 00:03:01,288
there we go, that would follow
this exact signature up here.

86
00:03:01,288 --> 00:03:04,099
If we gave it that name
parameter, it would look like this

87
00:03:04,099 --> 00:03:06,099
down here in a full fledged function.

88
00:03:06,099 --> 00:03:08,400
There we go, these have
the exact same type.

89
00:03:08,400 --> 00:03:09,720
And if I wanted to return something

90
00:03:09,720 --> 00:03:12,120
like a number for example, as you can see,

91
00:03:12,120 --> 00:03:14,730
this is going to follow that
exact same type signature.

92
00:03:14,730 --> 00:03:16,770
If I hover over F, you can actually see

93
00:03:16,770 --> 00:03:18,507
the signature is exactly the same for F.

94
00:03:18,507 --> 00:03:20,128
You can see it says function F

95
00:03:20,128 --> 00:03:21,630
and it says the name is a string

96
00:03:21,630 --> 00:03:22,620
and it's returning a number.

97
00:03:22,620 --> 00:03:24,176
So it's essentially the exact same thing.

98
00:03:24,176 --> 00:03:27,000
The only difference is when
you're defining the return type

99
00:03:27,000 --> 00:03:28,920
in a function like this,
you do it with a colon

100
00:03:28,920 --> 00:03:30,885
followed by saying that
this will be a number.

101
00:03:30,885 --> 00:03:33,150
But when you're defining
something as a function,

102
00:03:33,150 --> 00:03:35,520
so like I want to use
a function as a type,

103
00:03:35,520 --> 00:03:37,953
you just do it with an
arrow syntax like this.