1
00:00:00,660 --> 00:00:05,730
We've now gotten an example of type annotations with the res classes and object literals, once again,

2
00:00:05,730 --> 00:00:10,410
I just want to remind you that we're going to have a separate section on ARray's classes and object

3
00:00:10,410 --> 00:00:11,160
literals as well.

4
00:00:11,310 --> 00:00:15,330
So all I'm trying to do right now is kind of give you a sample of some of the syntax that we're going

5
00:00:15,330 --> 00:00:18,150
to need to understand to get through some of the more complicated stuff.

6
00:00:18,930 --> 00:00:23,550
The last example I want to give you down here, they type annotation is for a function.

7
00:00:25,190 --> 00:00:30,830
Function, there we go, so unfortunately, the annotation for a function is kind of the nastiest syntax,

8
00:00:30,980 --> 00:00:35,660
but you're going to see so many examples of it that you're going to understand it really quickly inside

9
00:00:35,660 --> 00:00:36,200
this course.

10
00:00:36,900 --> 00:00:40,550
So I'm going to first declare a function and it's going to look like a normal function and then we'll

11
00:00:40,550 --> 00:00:42,650
come back to it and add in the type annotation.

12
00:00:43,490 --> 00:00:45,920
So I'm going to make a new function called log.

13
00:00:45,930 --> 00:00:51,380
No, this is going to be an arrow function and I'm going to call it with a No.

14
00:00:53,070 --> 00:00:58,410
I and then inside the function, I'm going to add in a console log for I.

15
00:00:59,570 --> 00:01:04,470
And you'll notice that I've got a little underline right here just to get the underline to go away.

16
00:01:04,610 --> 00:01:09,430
I'm going to add on I Colen no like so we don't need to worry about the syntax just yet.

17
00:01:09,620 --> 00:01:11,720
That is not the annotation we are worried about here.

18
00:01:11,990 --> 00:01:13,790
So let's just kind of ignore that for a second.

19
00:01:14,000 --> 00:01:17,960
Once again, we're going to have a separate section for functions just as we are for these other types

20
00:01:17,960 --> 00:01:18,830
of values as well.

21
00:01:19,660 --> 00:01:25,350
Right now, all I want to figure out is how we can add on a type annotation or log number right here.

22
00:01:25,940 --> 00:01:31,610
Remember, we want to use a type annotation to describe what type of value we are signing to a variable.

23
00:01:32,060 --> 00:01:37,940
So I want to add in some code that's going to tell TypeScript some information about this function.

24
00:01:38,690 --> 00:01:42,950
And in all the other examples we've done so far, the syntax has been sometimes a little bit weird,

25
00:01:42,950 --> 00:01:44,680
but more or less understandable.

26
00:01:45,530 --> 00:01:50,600
So, for example, up here with the arrays, we put down string and then the square brackets to indicate

27
00:01:50,600 --> 00:01:53,880
this was going to be an array in the case of a string.

28
00:01:53,930 --> 00:01:54,860
Well, that was really easy.

29
00:01:54,860 --> 00:01:56,030
We just wrote out the word string.

30
00:01:56,890 --> 00:02:01,980
And then we saw with an object literal, we described the different properties and types, we're of

31
00:02:02,020 --> 00:02:05,290
the different properties and types of values that the object would have.

32
00:02:06,070 --> 00:02:08,860
So in the case of a function, we're going to do something similar.

33
00:02:09,340 --> 00:02:13,240
We first need to think about what properties we really care about, what they function.

34
00:02:14,390 --> 00:02:19,880
Well, with a function, what you and I really care about as developers is what arguments are going

35
00:02:19,880 --> 00:02:25,200
to go into the function and what different types of values we expect the function to return.

36
00:02:25,850 --> 00:02:30,650
So that's the information we're going to encode inside the sanitation, inside the annotation that goes

37
00:02:30,650 --> 00:02:31,250
right here.

38
00:02:31,400 --> 00:02:36,620
We're going to try to tell typescript what different arguments the function is going to take and what

39
00:02:36,620 --> 00:02:38,970
different values it is going to return.

40
00:02:39,710 --> 00:02:41,900
So here's we're going to write out we're going to write out inside of your.

41
00:02:43,390 --> 00:02:48,040
Right here, I'm going to put down a set of parentheses and inside there I'm going to provide an annotation

42
00:02:48,040 --> 00:02:50,130
for the different arguments that go into the function.

43
00:02:50,740 --> 00:02:55,870
So I'm going to say that this thing is supposed to receive a argument with the name of I.

44
00:02:56,880 --> 00:02:58,080
That's going to be a No.

45
00:02:59,380 --> 00:03:04,210
Then right after that set of parentheses, I'll put in an arrow and then right after that, I'm going

46
00:03:04,210 --> 00:03:07,820
to list out the different values that I expect this function to return.

47
00:03:08,650 --> 00:03:11,040
Now, in this case, I expect this function to return nothing.

48
00:03:11,380 --> 00:03:13,990
So I'm going to use a very special type called void.

49
00:03:15,080 --> 00:03:17,050
All right, so there's the full imitation.

50
00:03:18,020 --> 00:03:21,620
I think you can agree with me that this is some really nasty syntax right here.

51
00:03:21,770 --> 00:03:26,100
It's really hard to understand where the invitation begins and where the function begins.

52
00:03:26,840 --> 00:03:30,290
So everything up to void, like right there, that's the annotation.

53
00:03:30,770 --> 00:03:35,900
That is us trying to tell TypeScript what type of value, what we are going to assign to this variable

54
00:03:35,900 --> 00:03:36,350
right here.

55
00:03:37,180 --> 00:03:40,730
Everything on the right hand side of the equals is the actual function.

56
00:03:41,560 --> 00:03:42,840
So this is the annotation.

57
00:03:42,880 --> 00:03:46,710
That's like a comment of us trying to tell TypeScript what we are doing here.

58
00:03:46,960 --> 00:03:49,470
It is not actual code that's going to be invoked.

59
00:03:49,990 --> 00:03:55,330
So even though it really, really looks like a function in its own complete right, it is not a function

60
00:03:55,330 --> 00:03:56,230
that we're going to run.

61
00:03:56,650 --> 00:03:58,990
It is a description of a function.

62
00:04:00,220 --> 00:04:04,750
And then on the right hand side of the equals sign is where we actually provide the implementation.

63
00:04:05,830 --> 00:04:10,600
OK, I know once again, the syntax here is a little bit weird, but don't worry, we're going to have

64
00:04:10,600 --> 00:04:15,760
that separate section on functions to really break down the syntax right here and really understand

65
00:04:15,760 --> 00:04:16,380
what's going on.

66
00:04:17,420 --> 00:04:22,089
All right, so we've now gotten an example of a type invitation with a bunch of different basic values,

67
00:04:22,550 --> 00:04:26,300
so now that we've seen all these, I want to point out one thing that's really interesting here.

68
00:04:27,230 --> 00:04:30,230
Let's take a look at this first declaration we did at the very top.

69
00:04:31,510 --> 00:04:36,610
Right now, if you hover over Appel's, you'll see a little pop up that says, oh yeah, apples is always

70
00:04:36,610 --> 00:04:37,660
going to refer to a number.

71
00:04:38,350 --> 00:04:39,520
So here's the interesting thing.

72
00:04:40,060 --> 00:04:42,460
I'm going to remove the type annotation.

73
00:04:42,460 --> 00:04:44,890
I'm going to delete that and the colon as well.

74
00:04:45,790 --> 00:04:52,270
And now if I hover over apples, I'll see the exact same thing I saw before, so somehow it looks like

75
00:04:52,270 --> 00:04:55,720
I didn't really have to add in that annotation in the first place.

76
00:04:56,500 --> 00:05:02,170
And that is the entire dynamic that we need to understand between these type annotations and these type

77
00:05:02,170 --> 00:05:02,860
inferences.

78
00:05:03,880 --> 00:05:09,700
We just learned how to add on a ton of code that are all type annotations, everything we just wrote,

79
00:05:09,700 --> 00:05:14,740
all that new syntax, word type annotations, but in that file that we just put together, there was

80
00:05:14,740 --> 00:05:20,560
not a single type annotation that was actually required, in other words, inside this file.

81
00:05:20,680 --> 00:05:24,190
We did not have to add in a single one of these type annotations.

82
00:05:24,190 --> 00:05:25,990
We can delete every single one of them.

83
00:05:27,050 --> 00:05:31,940
And everything is still going to work just fine, I can delete all of them and I still see no errors

84
00:05:31,940 --> 00:05:32,780
inside my code.

85
00:05:33,290 --> 00:05:38,210
And in every case, if I hover over a given variable, you'll see that I still get a little popup telling

86
00:05:38,210 --> 00:05:40,630
me what type of value each variable is.

87
00:05:41,360 --> 00:05:44,480
So it's very clear that there's kind of more going on here than meets the eye.

88
00:05:44,960 --> 00:05:46,010
So let's take a quick pause.

89
00:05:46,010 --> 00:05:50,480
When we come back, the next video, we're going to start to understand this kind of tension between

90
00:05:50,480 --> 00:05:52,460
type annotations and type inference.

91
00:05:53,000 --> 00:05:55,120
So quick pause and I'll see you in just a minute.