1
00:00:00,810 --> 00:00:05,340
In this video, we're going to continue talking about annotations and inference, but rather than focusing

2
00:00:05,340 --> 00:00:09,420
on how those features are applied to variables, we're going to instead focus on how these features

3
00:00:09,420 --> 00:00:10,770
are applied to functions.

4
00:00:11,250 --> 00:00:16,200
So still talking about working with types, but we're now talking about labeling functions as opposed

5
00:00:16,200 --> 00:00:16,800
to variables.

6
00:00:17,740 --> 00:00:21,970
Now, you might be thinking that we already spoke about functions a couple of videos ago, but let's

7
00:00:21,970 --> 00:00:25,840
pull open that code snippet that we wrote back inside my Variables X File.

8
00:00:26,020 --> 00:00:30,520
We can scroll down a little bit and see where we added in some type annotation around a function.

9
00:00:31,210 --> 00:00:31,900
So here's the thing.

10
00:00:32,259 --> 00:00:36,640
The annotation that we wrote out right here was an annotation for the variable.

11
00:00:37,030 --> 00:00:42,580
We were telling typescript, hey, we're going to assign a value to this variable that's going to have

12
00:00:42,730 --> 00:00:43,780
this type right here.

13
00:00:43,930 --> 00:00:45,070
It's going to be a function.

14
00:00:45,070 --> 00:00:47,420
It's going to take some argument and have some return value.

15
00:00:47,920 --> 00:00:49,960
Again, it was modifying the variable.

16
00:00:51,320 --> 00:00:56,210
So now we're going to be moving on to the right hand side of that equal sign, we're now going to focus

17
00:00:56,210 --> 00:01:03,830
on how we add annotations to the function itself, how we annotate its input arguments and its return

18
00:01:03,830 --> 00:01:04,819
values as well.

19
00:01:06,070 --> 00:01:08,970
So with that mind, let's flip back over quick diagram here.

20
00:01:09,040 --> 00:01:13,870
I want to give you a plain definition on what's going on with annotations and inference around functions.

21
00:01:15,160 --> 00:01:16,010
All right, here we go.

22
00:01:16,540 --> 00:01:21,220
So when we talk about type annotations around functions, we are talking about code that we are adding

23
00:01:21,220 --> 00:01:24,280
in to our project that's going to help typescript along.

24
00:01:25,000 --> 00:01:30,160
The goal of these annotations is to tell TypeScript about the type of arguments that a function will

25
00:01:30,160 --> 00:01:33,550
receive, any type of value that it will return.

26
00:01:34,450 --> 00:01:39,340
So, again, we are adding in code here to help typescript along, very similar to the type annotations

27
00:01:39,340 --> 00:01:40,390
we are already adding in.

28
00:01:40,600 --> 00:01:44,630
The big difference here is that we are no longer annotating a variable declaration.

29
00:01:45,190 --> 00:01:48,190
Instead, we are annotating the function itself.

30
00:01:50,400 --> 00:01:55,470
Now, also with type inference, we still have type inference working around functions as well, remember

31
00:01:55,470 --> 00:01:59,460
type of inferences, that kind of automatic system where TypeScript is going to try to figure out what

32
00:01:59,460 --> 00:02:00,480
is going on for us.

33
00:02:01,320 --> 00:02:04,040
This same system applies to functions as well.

34
00:02:04,080 --> 00:02:06,030
But there's one big difference.

35
00:02:06,570 --> 00:02:10,770
Type inference only works around the return value from a function.

36
00:02:11,220 --> 00:02:16,350
So TypeScript will try to figure out what value or what type of value you are returning from a function,

37
00:02:16,740 --> 00:02:21,090
but it will not try to figure out what type of value the arguments are.

38
00:02:22,210 --> 00:02:26,500
Now, both these definitions right here, everything I just said I feel like is kind of confusing,

39
00:02:26,540 --> 00:02:30,010
I think learning all this function stuff is a lot easier to look at some code snippets.

40
00:02:30,460 --> 00:02:32,030
So let's flip over to our code editor.

41
00:02:32,170 --> 00:02:35,620
We're going to write out a single function and annotate it as best we can.

42
00:02:36,460 --> 00:02:36,910
All right.

43
00:02:36,910 --> 00:02:40,720
So back inside my code editor, I'll find that annotations directory we had created.

44
00:02:41,120 --> 00:02:44,650
I'm going to make a new file in there and call it Functions Dotts.

45
00:02:45,830 --> 00:02:50,600
So inside of here, I want to write out one single function called ADD, this is going to be a function

46
00:02:50,600 --> 00:02:54,950
that's going to take two numbers as arguments, add them together and return the result.

47
00:02:55,910 --> 00:03:00,320
So I'm going to receive those two arguments as names A and B like so.

48
00:03:01,200 --> 00:03:06,090
Now, as soon as I add in those arguments, you'll notice I get a little warning if I hover over them

49
00:03:06,300 --> 00:03:10,100
or just the first one, it says here that A has a any type.

50
00:03:10,830 --> 00:03:15,360
So right now, TypeScript has no idea what type of value A is.

51
00:03:15,990 --> 00:03:21,120
So to help TypeScript understand what's going on here, we have to head out on a type annotation.

52
00:03:22,070 --> 00:03:27,110
To do so right after the argument, name will put in a colon and then the type of value that A will

53
00:03:27,110 --> 00:03:27,380
be.

54
00:03:27,770 --> 00:03:29,270
So in this case, it's going to be a No.

55
00:03:30,350 --> 00:03:35,360
Same thing for me as well, right after being put in a colon and then the type of value that B will

56
00:03:35,360 --> 00:03:35,570
be.

57
00:03:36,380 --> 00:03:41,000
So we've now defined A function that's going to take two arguments, A and B, and they're both going

58
00:03:41,000 --> 00:03:41,660
to be numbers.

59
00:03:42,750 --> 00:03:47,070
Now, the last thing we'll do is add in annotation for the type of value that the function is going

60
00:03:47,070 --> 00:03:47,670
to return.

61
00:03:48,150 --> 00:03:51,650
Remember, we had said that the ad function was going to add to numbers and return the result.

62
00:03:51,930 --> 00:03:55,320
So it makes sense that this thing will return a number as well.

63
00:03:56,400 --> 00:04:01,620
To add in that invitation right after the argument list, I'll put in a colon and then the type of value

64
00:04:01,620 --> 00:04:03,960
that the function will return in this case, a number.

65
00:04:05,710 --> 00:04:10,540
As soon as I add that in, you'll see that I get a ER right here again, this time it's saying that

66
00:04:10,540 --> 00:04:15,720
I have a function whose type is neither void or any, and it must return a value.

67
00:04:16,300 --> 00:04:20,860
So all this is saying right here is that we just added in an annotation that said our function was going

68
00:04:20,860 --> 00:04:22,750
to return a value that is a number.

69
00:04:23,200 --> 00:04:25,510
But we don't have any return statement right now.

70
00:04:25,510 --> 00:04:27,730
We don't have any code to actually return a number.

71
00:04:28,240 --> 00:04:32,230
And so TypeScript is telling us, hey, your function isn't working as expected.

72
00:04:32,860 --> 00:04:35,550
So to fix that error, all we have to do is return a number.

73
00:04:36,250 --> 00:04:40,780
So inside the function, I will return A plus B like so and then that er goes away.

74
00:04:42,060 --> 00:04:47,070
All right, so this is a very basic example right here, but it highlights some really important ideas

75
00:04:47,070 --> 00:04:48,930
around type annotations for functions.

76
00:04:49,240 --> 00:04:50,460
So let's take a quick pause.

77
00:04:50,460 --> 00:04:53,780
We're going to come back to the next video and dissect this thing just a little bit more.

78
00:04:54,150 --> 00:04:55,550
So I'll see you in just a minute.