1 00:00:00,930 --> 00:00:05,370 In this video we're going to continue talking about annotations and inference but rather than focusing 2 00:00:05,370 --> 00:00:09,510 on how those features are applied to variables we're going to instead focus on how these features are 3 00:00:09,510 --> 00:00:11,230 applied to functions. 4 00:00:11,280 --> 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:17,740 to variables. 6 00:00:17,760 --> 00:00:22,120 Now you might be thinking that we already spoke about functions a couple of videos go but let's pull 7 00:00:22,120 --> 00:00:26,000 open that code snippet that we wrote back inside my variables dot s file. 8 00:00:26,080 --> 00:00:31,240 We can scroll down a little bit and see where we added in some type annotation around a function. 9 00:00:31,240 --> 00:00:32,190 So here's the thing. 10 00:00:32,320 --> 00:00:38,140 The annotation that we wrote out right here was an annotation for the variable we were telling typescript 11 00:00:38,200 --> 00:00:44,050 hey we're going to assign a value to this variable that's going to have this type right here. 12 00:00:44,050 --> 00:00:47,910 It's going to be a function it's going to take some argument and have some return value. 13 00:00:47,980 --> 00:00:51,310 Again it was modifying the variable. 14 00:00:51,380 --> 00:00:55,400 So now we're going to be moving on to the right hand side of that equal sign. 15 00:00:55,430 --> 00:01:01,910 We're not going to focus on how we add annotations to the function itself how we annotate its input 16 00:01:01,940 --> 00:01:06,810 arguments and its return values as well so with that mind. 17 00:01:06,890 --> 00:01:08,940 Well let's flip back over a quick diagram here. 18 00:01:09,120 --> 00:01:15,180 I want to give you a plain definition on what's going on with annotations and inference around functions. 19 00:01:15,380 --> 00:01:15,630 All right. 20 00:01:15,630 --> 00:01:16,600 Here we go. 21 00:01:16,620 --> 00:01:21,210 So when we talk about type annotations around functions we are talking about code that we are adding 22 00:01:21,210 --> 00:01:27,450 into our project that's going to help typescript along the goal of these annotations is to tell typescript 23 00:01:27,510 --> 00:01:34,500 about the type of arguments that a function will receive any type of value that it will return. 24 00:01:34,500 --> 00:01:39,450 So again we are adding in code here to help typescript along very similar to the type annotations we 25 00:01:39,450 --> 00:01:40,610 were already adding in. 26 00:01:40,650 --> 00:01:45,290 The big difference here is that we are no longer annotating a variable declaration. 27 00:01:45,300 --> 00:01:51,860 Instead we are annotating the function itself now also with type inference. 28 00:01:51,860 --> 00:01:55,080 We still have type inference working around functions as well. 29 00:01:55,130 --> 00:01:59,210 Remember type of inference is that kind of automatic system where typescript is going to try to figure 30 00:01:59,210 --> 00:02:01,130 out what is going on for us. 31 00:02:01,400 --> 00:02:08,060 This same system applies to functions as well but there's one big difference type inference only works 32 00:02:08,060 --> 00:02:11,270 around the return value from a function. 33 00:02:11,270 --> 00:02:16,340 So typescript will try to figure out what value or what type of value you are returning from a function 34 00:02:16,820 --> 00:02:22,540 but it will not try to figure out what type of value the arguments are now. 35 00:02:22,640 --> 00:02:26,570 Both these definitions right here everything I just said I feel like is kind of confusing. 36 00:02:26,570 --> 00:02:30,110 I think learning all this function stuff is a lot easier to look at some code snippets. 37 00:02:30,480 --> 00:02:35,180 So let's flip over to our code editor we're going to write out a single function and annotated as best 38 00:02:35,180 --> 00:02:35,630 we can. 39 00:02:36,620 --> 00:02:36,910 All right. 40 00:02:36,920 --> 00:02:41,210 So back inside my code editor I'll find that annotations directory we had created. 41 00:02:41,210 --> 00:02:47,140 I'm gonna make a new file in there and call it functions dot T.S. so inside of here I want to write 42 00:02:47,140 --> 00:02:52,570 out one single function called add this is going to be a function that's going to take two numbers as 43 00:02:52,570 --> 00:02:58,900 arguments add them together and return the result so I'm going to receive those two arguments as names 44 00:02:59,020 --> 00:03:05,560 a and b like so now as soon as I add in those arguments you'll notice I get a little warning if I hover 45 00:03:05,560 --> 00:03:10,190 over them or just the first one it says here that a has a any type. 46 00:03:10,880 --> 00:03:16,030 So right now typescript has no idea what type of value a is. 47 00:03:16,060 --> 00:03:22,220 So to help typescript understand what's going on here we have to had on add on a type annotation to 48 00:03:22,220 --> 00:03:27,830 do so right after the argument name will put in a colon and then the type of value that a will be. 49 00:03:27,830 --> 00:03:30,300 So in this case it's going to be a number. 50 00:03:30,400 --> 00:03:31,650 Same thing for B as well. 51 00:03:31,720 --> 00:03:35,600 Right after B I'll put in a colon and then the type of value that B will be. 52 00:03:36,430 --> 00:03:41,080 So we've now defined a function that's going to take two arguments A and B and they're both going to 53 00:03:41,080 --> 00:03:42,820 be numbers. 54 00:03:42,850 --> 00:03:47,170 Now the last thing we'll do is add in annotation for the type of value that the function is going to 55 00:03:47,170 --> 00:03:48,160 return. 56 00:03:48,190 --> 00:03:52,000 Remember we had said that the add function was going to add two numbers and return the result. 57 00:03:52,000 --> 00:03:58,180 So it makes sense that this thing will return a number as well too adding that invitation right after 58 00:03:58,180 --> 00:04:03,220 the argument list I'll put in a colon and then the type of value that the function will return in this 59 00:04:03,220 --> 00:04:09,950 case a number as soon as I add that and you'll see that I get a air right here again this time it's 60 00:04:09,950 --> 00:04:15,710 saying that I've a function whose type is neither void or any and it must return a value. 61 00:04:16,340 --> 00:04:20,870 So all this is saying right here is that we just added in an annotation that said our function was going 62 00:04:20,870 --> 00:04:25,510 to return a value that is a number but we don't have any return statement right now. 63 00:04:25,520 --> 00:04:28,220 We don't have any code to actually return a number. 64 00:04:28,310 --> 00:04:32,810 And so typescript is telling us hey your function isn't working as expected. 65 00:04:32,900 --> 00:04:36,290 So to fix that error all we have to do is return a number. 66 00:04:36,320 --> 00:04:39,650 So inside the function I will return a plus b like so. 67 00:04:39,650 --> 00:04:42,510 And then that error goes away all right. 68 00:04:42,510 --> 00:04:47,730 So this is a very basic example right here but it highlights some really important ideas around type 69 00:04:47,730 --> 00:04:49,280 annotations for functions. 70 00:04:49,300 --> 00:04:53,340 So let's take a quick pause we're going to come back the next video and dissect this thing just a little 71 00:04:53,340 --> 00:04:55,560 bit more so I'll see you in just a minute.