1
00:00:00,710 --> 00:00:05,330
We've now gotten an example of type invitations with the res classes and object liberals.

2
00:00:05,330 --> 00:00:10,040
Once again I just want to remind you that we're gonna have a separate section on arrays classes and

3
00:00:10,070 --> 00:00:11,330
object liberals as well.

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

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

6
00:00:18,950 --> 00:00:20,360
The last example I want to give you.

7
00:00:20,360 --> 00:00:25,540
Down here they type invitation is for a function function.

8
00:00:25,580 --> 00:00:26,540
There we go.

9
00:00:26,540 --> 00:00:32,270
So unfortunately the annotation for a function is kind of a nasty syntax but you're going to see so

10
00:00:32,270 --> 00:00:36,770
many examples of it that you're going to understand it really quickly inside this course.

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

12
00:00:40,550 --> 00:00:43,510
come back to it and add in the type annotation.

13
00:00:43,570 --> 00:00:46,020
So I'm going to make a new function called log.

14
00:00:46,020 --> 00:00:54,000
No this is going to be an arrow function and I'm going to call it with a number they'll call I.

15
00:00:54,210 --> 00:01:01,060
And then inside the function I'm going to add in a console log or I you'll notice said I've got a little

16
00:01:01,120 --> 00:01:04,630
underline right here just to get the underline to go away.

17
00:01:04,690 --> 00:01:06,300
I'm going to add on I colon.

18
00:01:06,360 --> 00:01:06,890
No.

19
00:01:06,910 --> 00:01:09,640
Like so we don't need to worry about this syntax just yet.

20
00:01:09,670 --> 00:01:11,990
That is not the annotation we are worried about here.

21
00:01:12,040 --> 00:01:14,050
So let's just kind of ignore that for a second.

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

23
00:01:17,950 --> 00:01:19,500
of values as well.

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

25
00:01:26,020 --> 00:01:29,550
Remember we want to use that type annotation to describe what type of value.

26
00:01:29,560 --> 00:01:32,040
We are assigning to a variable.

27
00:01:32,140 --> 00:01:38,960
So I want to add in some code that's going to tell typescript some information about this function when

28
00:01:38,980 --> 00:01:43,660
all the other examples we've done so far the syntax has been sometimes a little bit weird but more or

29
00:01:43,660 --> 00:01:45,610
less understandable.

30
00:01:45,610 --> 00:01:50,770
So for example up here with the arrays we put down string and in the square brackets to indicate this

31
00:01:50,770 --> 00:01:52,000
was gonna be an array.

32
00:01:52,360 --> 00:01:53,950
In the case of a string.

33
00:01:54,010 --> 00:01:59,580
Well that was really easy we just wrote out the word string and we saw with an object literal we described

34
00:01:59,790 --> 00:02:04,440
the different properties and types for some of the different properties and types of values that the

35
00:02:04,440 --> 00:02:06,120
object would have.

36
00:02:06,120 --> 00:02:09,360
So in the case of a function we're going to do something similar.

37
00:02:09,440 --> 00:02:15,490
We first need to think about what properties we really care about with a function well with a function

38
00:02:15,730 --> 00:02:21,610
what you and I really care about as developers is what arguments are going to go into the function and

39
00:02:21,610 --> 00:02:25,930
what different types of values we expect the function to return.

40
00:02:25,930 --> 00:02:30,640
So that's the information we're going to encode inside the sanitation inside the annotation that goes

41
00:02:30,640 --> 00:02:31,420
right here.

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

43
00:02:36,610 --> 00:02:39,780
different values it is going to return.

44
00:02:39,790 --> 00:02:44,310
So here's we're going to write out we're going to write out inside of your right here I'm going to put

45
00:02:44,310 --> 00:02:49,170
down a set of parentheses and inside there I'm going to provide an annotation for the different arguments

46
00:02:49,170 --> 00:02:50,620
that go into the function.

47
00:02:50,820 --> 00:02:57,330
So I'm going to say that this thing is supposed to receive a argument with the name of i that's going

48
00:02:57,330 --> 00:03:04,030
to be a no then right after that set of parentheses I'll put in an arrow and then right after that I'm

49
00:03:04,030 --> 00:03:08,700
going to list out the different values that I expect this function to return.

50
00:03:08,740 --> 00:03:11,330
Now in this case I expect this function to return nothing.

51
00:03:11,440 --> 00:03:15,710
So I'm going to use a very special type called void all right.

52
00:03:15,750 --> 00:03:21,150
So there's the full invitation and I think you can agree with me that this is some really nasty syntax

53
00:03:21,150 --> 00:03:21,830
right here.

54
00:03:21,840 --> 00:03:26,890
It's really hard to understand where the annotation begins and where the function begins.

55
00:03:26,910 --> 00:03:29,160
So everything up to void like right there.

56
00:03:29,190 --> 00:03:34,770
That's the annotation that is us trying to tell typescript what type of value we are going to assign

57
00:03:35,070 --> 00:03:36,750
to this variable right here.

58
00:03:37,300 --> 00:03:41,580
Everything on the right hand side of the equals is the actual function.

59
00:03:41,620 --> 00:03:47,000
So this is the annotation that's like a comment of us trying to tell typescript what we are doing here.

60
00:03:47,050 --> 00:03:50,000
There's not actual code that's going to be invoked.

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

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

63
00:03:56,740 --> 00:04:03,270
It is a description of a function and then on the right hand side of the equals sign is where we actually

64
00:04:03,270 --> 00:04:06,150
provide the implementation.

65
00:04:06,240 --> 00:04:11,250
I know once again the syntax here is a little bit weird but don't worry we're going to have that separate

66
00:04:11,250 --> 00:04:16,350
section on functions to really break down the syntax right here and really understand what's going on

67
00:04:17,560 --> 00:04:17,830
all right.

68
00:04:17,830 --> 00:04:22,490
So we've now gotten an example of a type annotation with a bunch of different basic values.

69
00:04:22,600 --> 00:04:27,190
So now that we've seen all these I want to point out one thing that's really interesting here.

70
00:04:27,220 --> 00:04:33,340
Let's take a look at this first declaration we did at the very top right now if you hover over apples

71
00:04:33,610 --> 00:04:37,660
you'll see a little pop up that says oh yeah apples is always going to refer to a number.

72
00:04:38,380 --> 00:04:43,960
So here's the interesting thing I'm going to remove the type annotation going to delete that and the

73
00:04:43,960 --> 00:04:50,850
colon as well and now if I hover over apples I'll see the exact same thing I saw before.

74
00:04:50,860 --> 00:04:56,950
So somehow it looks like I didn't really have to add in that annotation in the first place and that

75
00:04:56,950 --> 00:05:03,730
is the entire dynamic that we need to understand between these type invitations and these type inferences.

76
00:05:03,950 --> 00:05:09,860
We just learned how to add on a ton of code that are all type invitations everything we just wrote all

77
00:05:09,860 --> 00:05:15,710
that new syntax were type annotations but in that file that we just put together there was not a single

78
00:05:15,710 --> 00:05:20,750
type annotation that was actually required in other words inside this file.

79
00:05:20,750 --> 00:05:26,000
We did not have to add in a single one of these type annotations We can delete every single one of them

80
00:05:27,160 --> 00:05:29,440
and everything is still going to work just fine.

81
00:05:29,560 --> 00:05:35,230
I can delete all them and I still see no errors inside my code and in every case if I hover over a given

82
00:05:35,230 --> 00:05:41,390
variable you'll see that I still get a little pop up telling me what type of value each variable is.

83
00:05:41,410 --> 00:05:45,030
So it's very clear that there's kind of more going on here than meets the eye.

84
00:05:45,050 --> 00:05:46,050
Let's take a quick pause.

85
00:05:46,070 --> 00:05:51,430
We come back the next video we're going to start to understand this kind of tension between type annotations

86
00:05:51,580 --> 00:05:52,840
and type inference.

87
00:05:53,080 --> 00:05:55,730
So quick pause and I'll see you in just a minute.