1
00:00:01,000 --> 00:00:06,100
In last video we started to explore type annotations around simple types like numbers string boolean

2
00:00:06,390 --> 00:00:08,330
and some built in objects as well.

3
00:00:08,500 --> 00:00:12,580
We're not gonna write out a couple of examples that use some more complicated syntax.

4
00:00:12,640 --> 00:00:18,110
So first start off with trying to add in a type invitation for an array in this example I'm going to

5
00:00:18,110 --> 00:00:23,870
try to make a new variable called colors and I want to try to assign it a array of strings and maybe

6
00:00:23,870 --> 00:00:29,210
these strings will be like red green and blue because hey we're calling this thing colors so to indicate

7
00:00:29,210 --> 00:00:34,480
that I'll add on an annotation of string and then square brackets like so.

8
00:00:34,500 --> 00:00:39,230
So this tells typescript that we're going to assign an array indicated by the square brackets.

9
00:00:39,320 --> 00:00:41,950
That's going to contain nothing but strings inside of it.

10
00:00:43,350 --> 00:00:51,370
So I can then place my equals sign and then replace the real array and say red green and blue so the

11
00:00:51,370 --> 00:00:56,620
important thing here to understand is that the annotation and specifically this bracket right here is

12
00:00:56,620 --> 00:00:58,590
not creating an array.

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

14
00:01:04,720 --> 00:01:10,210
strings one of the more complicated things in the world of typescript I think is kind of separating

15
00:01:10,240 --> 00:01:15,220
all this new type indentation syntax and understanding when we are actually creating an array like as

16
00:01:15,220 --> 00:01:16,780
we are here on the right hand side.

17
00:01:16,840 --> 00:01:23,740
And when we are trying to indicate a type of array as we're doing here on the left hand side now we're

18
00:01:23,740 --> 00:01:25,780
going to grow into great examples.

19
00:01:25,870 --> 00:01:28,880
Much more detail with arrays in just a couple of videos.

20
00:01:28,900 --> 00:01:34,390
So right now let's just kind of sit on this example right here and say if we ever want to create a type

21
00:01:34,390 --> 00:01:37,940
annotation for an array of strings that's how we would do it.

22
00:01:38,080 --> 00:01:44,310
We can do the same thing with say maybe an array of numbers as well so let's say How about let my numbers

23
00:01:44,320 --> 00:01:49,600
for lack of a better name and I'll put down the type of value that I'm going to have inside of the array

24
00:01:50,110 --> 00:01:56,350
which in this case will be a number then empty square brackets an equal sign and then my real array

25
00:01:56,440 --> 00:02:03,980
like so the same thing with billions as well so I could say let I don't know truth's.

26
00:02:03,990 --> 00:02:04,530
How about that.

27
00:02:04,570 --> 00:02:13,200
That'll work that's going to be a boolean or an array of billions and I'll set equal to true true false.

28
00:02:13,230 --> 00:02:19,100
Like so like I said we're going to go into greater detail with arrays in just a moment so we'll just

29
00:02:19,100 --> 00:02:20,370
hang it right there.

30
00:02:21,030 --> 00:02:26,310
So for our next example let's take a look at how we would deal with classes with type annotations.

31
00:02:26,310 --> 00:02:31,500
So I'll put down another section here called classes and we'll create a class called car that's gonna

32
00:02:31,500 --> 00:02:36,660
make an empty class like so classes are another thing that we're going to go into great detail in this

33
00:02:36,660 --> 00:02:37,210
course.

34
00:02:37,320 --> 00:02:42,060
Again for right now I just want you to understand how we can add in a type annotation with an instance

35
00:02:42,300 --> 00:02:49,920
of class car so I could create a new variable down here and call it say lowercase car well then put

36
00:02:49,920 --> 00:02:54,810
the colon and then the type of the variable or seeing the type of value that we're going to assign to

37
00:02:54,810 --> 00:02:55,650
car.

38
00:02:55,800 --> 00:03:02,580
In this case I want to make an instance of class car so I'm going to say that my type is capital c car

39
00:03:03,210 --> 00:03:05,780
and this is where things start to get really crazy.

40
00:03:05,910 --> 00:03:11,380
If you've never worked a lot with classes before traditionally we create classes with capitalized names.

41
00:03:11,490 --> 00:03:17,040
So whenever you see a capital name like this like capital car that means we are referring to the type

42
00:03:17,280 --> 00:03:23,900
of class car and then usually whenever we have a fully lowercase name as you see right here we have

43
00:03:23,900 --> 00:03:26,870
a variable that's referring to an instance of a car.

44
00:03:26,900 --> 00:03:34,070
So we're saying the variable car is only ever going to refer to an instance of a car we can then place

45
00:03:34,070 --> 00:03:35,920
our equals sign and then make a new car.

46
00:03:35,990 --> 00:03:39,380
And that's what creates our instance All right.

47
00:03:39,410 --> 00:03:42,320
Now one more or two more quick examples here.

48
00:03:42,350 --> 00:03:46,920
Take a look at how we add in a type notation for an object literal.

49
00:03:46,920 --> 00:03:51,710
Now this is where the syntax starts to go a little bit more challenging but functions are even a little

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

51
00:03:52,130 --> 00:03:55,200
So hey let's just hang in there for right now.

52
00:03:55,250 --> 00:04:01,070
I want to try creating an object and adding in a type notation for it going to first create the object

53
00:04:01,160 --> 00:04:06,260
and we'll discuss how we can add in the annotation so I'll make a new variable called points and I'm

54
00:04:06,260 --> 00:04:15,430
going to assign that to an object with an x value of ten and a y value of about 20 like so.

55
00:04:15,440 --> 00:04:18,600
So how would we add in a type invitation for this.

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

57
00:04:24,530 --> 00:04:28,250
what type of value we're going to assign to point.

58
00:04:28,250 --> 00:04:32,210
Now the only difference this time around is that the syntax is going to look a little bit nasty.

59
00:04:32,450 --> 00:04:39,260
So to indicate that we're going to assign an object that has an x property that's a number and a y property

60
00:04:39,320 --> 00:04:45,680
to number two the variable point we're gonna put the colon and then a set of curly braces and then we'll

61
00:04:45,680 --> 00:04:51,020
list out all the different property names with their respective types right inside of that set of curly

62
00:04:51,020 --> 00:04:52,290
braces.

63
00:04:52,340 --> 00:04:56,780
So I'm going to say that the object that we're going to assign a point is going to have an x property

64
00:04:57,020 --> 00:05:04,430
that's a number I'll then put in a semicolon and I'll say that it's going to also have a Y property

65
00:05:04,730 --> 00:05:07,250
that's a number as well.

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

67
00:05:12,530 --> 00:05:13,470
property names.

68
00:05:13,490 --> 00:05:19,290
So I do not technically have to put in a colon after the Y property although I can't if I want to.

69
00:05:19,530 --> 00:05:22,520
Like I said this is where things start to get a little bit crazy.

70
00:05:22,630 --> 00:05:25,520
Once again we are declaring a variable called point.

71
00:05:25,750 --> 00:05:32,220
We are assigning it an object that has an x property and y property and then we are simultaneously adding

72
00:05:32,220 --> 00:05:37,980
in a type annotation for point as well and we're saying we can only ever assign an object to a point

73
00:05:38,310 --> 00:05:44,350
that has an x property that's a number into y property that's a number as well so just as we saw a moment

74
00:05:44,350 --> 00:05:46,170
ago back up you're at the top.

75
00:05:46,180 --> 00:05:52,270
We saw very simply if we assign a bad value on the right hand side that doesn't agree with the type

76
00:05:52,270 --> 00:05:53,050
on the left hand side.

77
00:05:53,050 --> 00:05:55,250
We very quickly see an error message.

78
00:05:55,250 --> 00:06:01,950
So that same rules applies with an object as well for example if I make the x property right here a

79
00:06:01,950 --> 00:06:09,800
string instead I'll see an error message that says that I have the property called X but I'm trying

80
00:06:09,800 --> 00:06:16,260
to provide a value that is a string instead of the number that I said I was going to provide so I'll

81
00:06:16,260 --> 00:06:18,050
change that back over to 10.

82
00:06:18,060 --> 00:06:19,650
Now the error goes away.

83
00:06:19,800 --> 00:06:24,960
Likewise if I do not provide all the required property values like for example instead of Y eyesight

84
00:06:25,020 --> 00:06:29,110
instead do something like a well see an error message as well.

85
00:06:29,310 --> 00:06:34,170
And the error says hey you're trying to give something that has property a but we were expecting to

86
00:06:34,170 --> 00:06:42,030
see somebody has Y instead so the same rule applies the syntax is just a little bit nastier.

87
00:06:42,210 --> 00:06:42,470
All right.

88
00:06:42,510 --> 00:06:47,160
Let's do one more quick pause in the next video we'll take a look at the syntax around functions and

89
00:06:47,160 --> 00:06:52,170
we'll talk about why we care about all these type annotations so quick pause and I'll see you in just

90
00:06:52,170 --> 00:06:52,550
a minute.