1
00:00:01,320 --> 00:00:05,580
In this video, we're going to dissect the add function just a little bit and get a better idea about

2
00:00:05,580 --> 00:00:07,440
how type annotation works with functions.

3
00:00:08,070 --> 00:00:12,780
So once again, every time we add in an argument list, we're always going to annotate every single

4
00:00:12,780 --> 00:00:13,310
argument.

5
00:00:14,070 --> 00:00:18,420
Likewise, right after that argument list, we're going to add an annotation for what the function will

6
00:00:18,420 --> 00:00:18,930
return.

7
00:00:19,920 --> 00:00:25,050
And when we add in the return of annotation right there, TypeScript is going to immediately analyze

8
00:00:25,050 --> 00:00:30,840
the body of your function, so it's literally going to read the code inside there and decide whether

9
00:00:30,840 --> 00:00:33,090
or not you actually are returning a value.

10
00:00:33,090 --> 00:00:33,870
That is a number.

11
00:00:34,700 --> 00:00:39,920
In this case, TypeScript knows that A and B are numbers, it seems that we add them together.

12
00:00:40,160 --> 00:00:44,810
It knows that adding two numbers together results in a number, and then it seems that we return that

13
00:00:44,810 --> 00:00:45,220
value.

14
00:00:45,830 --> 00:00:50,810
So TypeScript can read this line of code right here and understand that we have done exactly what we

15
00:00:50,810 --> 00:00:51,800
said we were going to do.

16
00:00:52,880 --> 00:00:58,010
If we return some other type of value from the function like a string like so we'll very quickly get

17
00:00:58,010 --> 00:01:02,510
an error because now TypeScript has read the body of our function again and seen that we are returning

18
00:01:02,510 --> 00:01:05,900
a string as opposed to the number we said we are going to do.

19
00:01:06,410 --> 00:01:10,610
So if I hover over that, it says specifically, hey, you're trying to return a string, you're supposed

20
00:01:10,610 --> 00:01:14,060
to return a number so I can revert it back over to A plus B.

21
00:01:15,250 --> 00:01:19,120
Now, one really important thing to understand here, and this is kind of getting into one of the more

22
00:01:19,120 --> 00:01:24,430
interesting sides of types, although we've declared what type of value we are going to return, TypeScript,

23
00:01:24,430 --> 00:01:29,230
is not going to try to make sure we actually have the correct code inside the function.

24
00:01:29,950 --> 00:01:32,590
And I know that sounds kind of weird, but let me tell you what I mean by that.

25
00:01:33,260 --> 00:01:35,260
You and I wrote a function here called ADD.

26
00:01:35,500 --> 00:01:39,520
And so I think any engineer who looks at this function would say, OK, if I call this, it's going

27
00:01:39,520 --> 00:01:44,080
to add two numbers together and then we add it in some annotation to say, oh, yeah, the function

28
00:01:44,080 --> 00:01:44,770
is going to return.

29
00:01:44,770 --> 00:01:50,890
A number typescript can make sure that we are returning the correct type of value, but it does not

30
00:01:50,890 --> 00:01:56,230
actually tried to make sure that we have the correct logic inside of our application or inside this

31
00:01:56,230 --> 00:01:56,590
function.

32
00:01:57,250 --> 00:02:02,470
So in other words, we could very easily return the difference between A and B. So no longer are we

33
00:02:02,470 --> 00:02:05,950
adding, we're now subtracting, but TypeScript doesn't care about that.

34
00:02:06,460 --> 00:02:09,340
It just says, hey, you're returning a number works for me.

35
00:02:09,910 --> 00:02:14,020
Now, this might seem like a really obvious thing, but it's going to have some really big impacts on

36
00:02:14,020 --> 00:02:15,640
some later topics we discuss.

37
00:02:16,120 --> 00:02:19,180
Remember, the type system is just concerned with types.

38
00:02:19,300 --> 00:02:24,790
It doesn't actually vet your actual logic inside the function and make sure you're doing the right thing,

39
00:02:24,790 --> 00:02:25,420
so to speak.

40
00:02:26,420 --> 00:02:28,520
All right, I am going to restore that to A plus B.

41
00:02:29,700 --> 00:02:34,230
Now, the last thing I want to mention here is just a little bit more around annotations and type inference.

42
00:02:34,530 --> 00:02:36,090
It's a quick diagram of this function.

43
00:02:37,160 --> 00:02:38,140
All right, here we go.

44
00:02:38,940 --> 00:02:44,670
So here's our ad function, we have two arguments into it, they are both numbers and we have a single

45
00:02:44,670 --> 00:02:46,140
output that is a number as well.

46
00:02:48,220 --> 00:02:54,760
So when we think about the arguments, we have to always use type annotation, in other words, we have

47
00:02:54,760 --> 00:02:57,880
to write out Colen no colon, no right there.

48
00:02:58,060 --> 00:03:03,060
Every single time we define a function, there are some corner cases where we do not.

49
00:03:03,220 --> 00:03:05,110
But right now, we'll just kind of ignore those.

50
00:03:05,110 --> 00:03:06,260
We'll discuss them later on.

51
00:03:06,760 --> 00:03:12,040
So whenever you and I write a function in this course, we are always going to add in these annotations

52
00:03:12,040 --> 00:03:13,720
every time we write out a function.

53
00:03:15,380 --> 00:03:19,190
So we do not get any type inference on arguments, arguments.

54
00:03:20,560 --> 00:03:26,800
We're always going to add in those annotations, however, on the other side over here, for the output

55
00:03:26,800 --> 00:03:32,070
from the function, we do get the benefit of type inference, but we're not going to use it.

56
00:03:32,510 --> 00:03:34,360
And so let me clarify what's going on there.

57
00:03:35,020 --> 00:03:40,090
Back over inside my function, I'm going to find the return value annotation right here and delete it.

58
00:03:41,130 --> 00:03:47,010
If I now hover over add, I'll see an annotation on the variable itself that says that ad is referring

59
00:03:47,010 --> 00:03:49,890
to a function that takes two numbers and returns a number.

60
00:03:51,330 --> 00:03:57,540
So that's type inference in play we did not add in a type return annotation, but type script read the

61
00:03:57,540 --> 00:04:00,870
body of our function and it knows that we are going to return a number.

62
00:04:01,480 --> 00:04:06,840
So just like we saw with inference before, with variable declarations, we have type inference around

63
00:04:06,840 --> 00:04:09,600
only the return value from a function.

64
00:04:10,610 --> 00:04:16,850
So we don't have to add in that return annotation if we don't want to, however, like I said, you

65
00:04:16,850 --> 00:04:19,640
and I always, always, always will.

66
00:04:19,790 --> 00:04:20,500
And here's why.

67
00:04:21,050 --> 00:04:24,290
Let's imagine we've got another function here called subtract.

68
00:04:26,030 --> 00:04:30,920
And this is also going to take two arguments, and B, they're both going to be numbers and I'm going

69
00:04:30,920 --> 00:04:32,150
to leave off the annotation.

70
00:04:32,810 --> 00:04:37,790
So then inside of here we'll just subtract the two numbers like so and yeah, OK.

71
00:04:37,880 --> 00:04:38,570
I think that's it.

72
00:04:38,580 --> 00:04:39,260
We're good to go.

73
00:04:40,220 --> 00:04:41,990
So do you notice anything missing here?

74
00:04:42,500 --> 00:04:48,260
Well, I didn't put on a return statement, so if I hover over subtract right now, you'll see that

75
00:04:48,260 --> 00:04:54,260
we get an annotation on here that says that we have two arguments as inputs and B and then we have a

76
00:04:54,260 --> 00:04:58,790
return value, a void, which means that we are not returning anything at all.

77
00:05:00,040 --> 00:05:04,690
So TypeScript has used type inference here to say, hey, since you're not returning anything from the

78
00:05:04,690 --> 00:05:08,740
function, I guess you don't mean to turn anything, return anything from the function.

79
00:05:09,490 --> 00:05:10,420
We made a mistake.

80
00:05:10,420 --> 00:05:12,070
We did not return a value in.

81
00:05:12,070 --> 00:05:16,720
TypeScript has not done anything to tell us that we made a mistake inside of this function.

82
00:05:17,840 --> 00:05:23,270
So if we instead add in an annotation for the return type right here of no, like so we'll very quickly

83
00:05:23,270 --> 00:05:28,250
see a error message that would be our signal that, hey, we probably made a mistake inside the function

84
00:05:28,400 --> 00:05:30,530
and we should add on a return like so.

85
00:05:31,470 --> 00:05:36,090
So that's why you and I are always going to use return annotations, is because we could very easily

86
00:05:36,240 --> 00:05:42,030
make a mistake inside of a function and forget to return a value or even return an incorrect type.

87
00:05:42,760 --> 00:05:45,570
If we do so, TypeScript is not going to give us an error.

88
00:05:45,780 --> 00:05:48,360
It's just going to think, oh, that's what the developer meant to do.

89
00:05:48,880 --> 00:05:52,720
The only way that we're going to get an error is if we add on that annotation right there.

90
00:05:53,100 --> 00:05:58,680
So like I said, although we get inference on the output from a function, we are not going to use it.

91
00:05:58,680 --> 00:06:01,050
We're always going to add that annotation in.

92
00:06:02,160 --> 00:06:06,390
All right, so that's functions in a nutshell, one or two quick, more topics, so quick pause and

93
00:06:06,390 --> 00:06:07,670
I'll see you in just a minute.