1
00:00:00,880 --> 00:00:05,620
In the last video, we started to explore type annotations around simple types like number, string,

2
00:00:05,620 --> 00:00:07,960
boolean and some built in objects as well.

3
00:00:08,470 --> 00:00:12,130
We're not going to write out a couple of examples that use some more complicated syntax.

4
00:00:12,610 --> 00:00:16,149
So first, start off with trying to add in a type annotation for an array.

5
00:00:17,010 --> 00:00:21,390
In this example, I'm going to try to make a new variable called colors, and I want to try to assign

6
00:00:21,390 --> 00:00:26,640
it a array of strings and maybe these strings will be like red, green and blue because, hey, we're

7
00:00:26,640 --> 00:00:27,660
calling this thing colors.

8
00:00:28,410 --> 00:00:33,780
So to indicate that, I'll add on an annotation of string and then square brackets like so.

9
00:00:34,470 --> 00:00:39,510
So this tells TypeScript that we're going to assign an array indicated by the square brackets that's

10
00:00:39,510 --> 00:00:41,940
going to contain nothing but strings inside of it.

11
00:00:43,280 --> 00:00:49,460
So I can then place my equals sign and then place the real array and say red, green and blue.

12
00:00:51,110 --> 00:00:56,150
So the important thing here to understand is that the sanitation and specifically this bracket right

13
00:00:56,150 --> 00:00:58,100
here is not creating an array.

14
00:00:58,550 --> 00:01:04,730
This is saying we're going to have something assigned to colors that is of type array that contains

15
00:01:04,730 --> 00:01:05,269
strings.

16
00:01:06,800 --> 00:01:10,580
One of the more complicated things in the world of TypeScript, I think is kind of separating all this

17
00:01:10,580 --> 00:01:15,440
new type annotation, syntax and understanding when we are actually creating an array like as we are

18
00:01:15,440 --> 00:01:21,380
here on the right hand side, and when we are trying to indicate a type of array, as we're doing here

19
00:01:21,380 --> 00:01:22,310
on the left hand side.

20
00:01:23,460 --> 00:01:28,680
Now we're going to go into great examples or much more detail with the raise in just a couple of videos.

21
00:01:28,830 --> 00:01:33,660
So for right now, let's just kind of sit on this example right here and say if we ever want to create

22
00:01:33,660 --> 00:01:37,140
a type annotation for an array of strings, that's how we would do it.

23
00:01:38,040 --> 00:01:41,070
We can do the same thing with, say, maybe an array of numbers as well.

24
00:01:41,580 --> 00:01:48,120
So let's say, how about let my numbers for lack of a better name and I'll put down that type of value

25
00:01:48,120 --> 00:01:53,340
that I'm going to have inside of the array, which in this case will be a number than empty square brackets,

26
00:01:54,030 --> 00:01:56,970
an equal sign, and then my real array like so.

27
00:01:57,970 --> 00:02:04,540
And the same thing with booleans as well, so I could say that I don't know, truth's how about that

28
00:02:04,540 --> 00:02:11,440
metal work that's going to be a boolean or an array of booleans and I'll set it equal to true.

29
00:02:12,010 --> 00:02:13,750
True, false like so.

30
00:02:15,330 --> 00:02:19,290
Like I said, we're going to go into greater detail with a raise in just a moment, so we'll just hang

31
00:02:19,290 --> 00:02:20,070
it right there.

32
00:02:20,980 --> 00:02:25,780
So for our next example, let's take a look at how we would deal with classes, with type annotations,

33
00:02:26,240 --> 00:02:31,460
so I'll put down another section here called Classes, and we'll create a class called car that's going

34
00:02:31,460 --> 00:02:32,890
to make an empty class like so.

35
00:02:33,960 --> 00:02:38,040
Classes are another thing that we're going to go into great detail in this course again for right now,

36
00:02:38,040 --> 00:02:43,050
I just want you to understand how we can add in a type invitation with an instance of class car.

37
00:02:44,280 --> 00:02:48,330
So I could create a new variable down here and call it, say, lowercase car.

38
00:02:49,470 --> 00:02:54,270
Well, then put the call in and then the type of the variable or the type of value that we're going

39
00:02:54,270 --> 00:02:59,130
to assign to car in this case, I want to make an instance of class car.

40
00:02:59,670 --> 00:03:05,370
So I'm going to say that my type is Capital C car, and this is where things start to get really crazy

41
00:03:05,820 --> 00:03:07,720
if you've never worked a lot with classes before.

42
00:03:07,920 --> 00:03:11,060
Traditionally, we create classes with capitalized names.

43
00:03:11,400 --> 00:03:16,590
So whenever you see a capital name like this, like capital car, that means we are referring to the

44
00:03:16,590 --> 00:03:18,330
type of class car.

45
00:03:19,320 --> 00:03:24,510
And usually whenever we have a fully lowercase name, as you see right here, we have a variable that's

46
00:03:24,510 --> 00:03:26,200
referring to an instance of a car.

47
00:03:26,850 --> 00:03:32,070
So we're saying the variable car is only ever going to refer to an instance of a car.

48
00:03:33,450 --> 00:03:37,500
We can then place our equals sign and then make a new car, and that's what creates our instance.

49
00:03:38,910 --> 00:03:41,700
All right, so now one more or two more quick examples here.

50
00:03:42,270 --> 00:03:46,120
We'll take a look at how we add in a type annotation for an object literal.

51
00:03:46,860 --> 00:03:51,690
This is where the syntax starts to go a little bit more challenging, but functions are even a little

52
00:03:51,690 --> 00:03:52,130
bit worse.

53
00:03:52,140 --> 00:03:54,290
So, hey, let's just hang in there for right now.

54
00:03:55,140 --> 00:03:59,310
I want to try creating an object and adding in a type annotation for it.

55
00:03:59,720 --> 00:04:03,090
I'm going to first create the object and we'll discuss how we can add in the annotation.

56
00:04:03,810 --> 00:04:09,810
So I'll make a new variable called Point, and I'm going to assign that to an object with an X value

57
00:04:10,410 --> 00:04:13,680
of ten and a Y value of how about 20 like so.

58
00:04:15,370 --> 00:04:17,980
So how would we add in a type invitation for this?

59
00:04:18,579 --> 00:04:24,520
Well, just like before, we'll add in a colon and then we'll add in some syntax right here to describe

60
00:04:24,520 --> 00:04:27,310
what type of value we're going to assign to point.

61
00:04:28,150 --> 00:04:31,750
Now, the only difference this time around is that the syntax is going to look a little bit nasty.

62
00:04:32,410 --> 00:04:39,310
So to indicate that we're going to assign an object that has an X property that's a number and a Y property

63
00:04:39,310 --> 00:04:45,580
to number to the variable point, we're going to put the colon and then a set of curly braces and then

64
00:04:45,580 --> 00:04:50,740
we'll list out all the different property names with the respective types right inside of that set of

65
00:04:50,740 --> 00:04:51,550
curly braces.

66
00:04:52,270 --> 00:04:56,800
So I'm going to say that the object that we're going to assign a point is going to have an X property.

67
00:04:56,960 --> 00:04:57,700
That's a no.

68
00:04:58,680 --> 00:05:00,690
I'll then put in a semicolon.

69
00:05:02,070 --> 00:05:05,930
And then I'll say that it's going to also have a Y property that's a number as well.

70
00:05:07,220 --> 00:05:12,530
I only have to put in a semicolon when I'm separating different types inside of a year or different

71
00:05:12,530 --> 00:05:17,810
property names, so I do not technically have to put in a colon after the property, although I can

72
00:05:17,810 --> 00:05:18,470
if I want to.

73
00:05:19,390 --> 00:05:23,980
It's like I said, this is where things start to get a little bit crazy, once again, we are declaring

74
00:05:23,980 --> 00:05:25,030
a variable called point.

75
00:05:25,690 --> 00:05:29,770
We are assigning it an object that has an X property in a Y property.

76
00:05:30,610 --> 00:05:35,740
And then we are simultaneously adding in a type annotation for point as well, and we're saying we can

77
00:05:35,740 --> 00:05:41,020
only ever assign an object to a point that has an X property that's a number and a Y property.

78
00:05:41,020 --> 00:05:41,910
That's a number as well.

79
00:05:43,160 --> 00:05:49,700
So just as we saw a moment ago, back up here at the top, we saw very simply, if we assign a bad value

80
00:05:49,700 --> 00:05:53,040
on the right hand side, that doesn't agree with the type on the left hand side.

81
00:05:53,060 --> 00:05:58,160
We very quickly see an error message so that same rules applies with an object as well.

82
00:05:59,060 --> 00:06:05,720
For example, if I make the property right here a string, instead, I'll see an error message that

83
00:06:05,720 --> 00:06:12,440
says that I have the property called X, but I'm trying to provide a value that is a string instead

84
00:06:12,440 --> 00:06:14,570
of the number that I said I was going to provide.

85
00:06:16,000 --> 00:06:18,920
So I'll change that back over to 10 and now the air goes away.

86
00:06:19,720 --> 00:06:24,570
Likewise, if I do not provide all the required property values, like, for example, instead of why

87
00:06:24,570 --> 00:06:28,570
I instead do something like a I'll see an error message as well.

88
00:06:29,200 --> 00:06:33,100
And the air says, hey, you're trying to give something that has property A..

89
00:06:33,220 --> 00:06:35,980
But we were expecting to see something has why instead.

90
00:06:36,970 --> 00:06:40,900
So the same rule applies, the syntax is just a little bit nastier.

91
00:06:42,040 --> 00:06:42,460
All right.

92
00:06:42,500 --> 00:06:46,840
Let's do one more quick pause in the next video, we'll take a look at these Syntex around functions

93
00:06:47,020 --> 00:06:50,350
and we'll talk about why we care about all these type annotations.

94
00:06:50,590 --> 00:06:52,540
So quick pause and I'll see you in just a minute.