1
00:00:00,720 --> 00:00:03,780
In this video we're going to start to discuss a raise in typescript.

2
00:00:03,780 --> 00:00:07,920
As usual we'll start off with the plain definition then walk through some examples and then talk about

3
00:00:07,920 --> 00:00:10,230
why we care about these things and went to use them.

4
00:00:10,230 --> 00:00:11,140
So let's get to it.

5
00:00:11,160 --> 00:00:12,930
First a quick definition.

6
00:00:13,260 --> 00:00:17,770
When we work with the raisin typescript we're essentially working with plain JavaScript arrays.

7
00:00:17,880 --> 00:00:21,430
So we still have all the features that you will are already used to.

8
00:00:21,480 --> 00:00:25,050
We can push elements into an array or pop elements out.

9
00:00:25,050 --> 00:00:30,580
We can map over an array write a for each loop use a for loop all that kind of good stuff.

10
00:00:30,720 --> 00:00:35,910
The one big difference with arrays and typescript is that generally we only stick elements with a very

11
00:00:35,910 --> 00:00:37,560
consistent type into the array.

12
00:00:38,160 --> 00:00:43,350
So for example if we make an array that is supposed to contain strings we will only put strings inside

13
00:00:43,350 --> 00:00:43,990
there.

14
00:00:43,990 --> 00:00:49,260
And if we try to put a number in or a boolean we're going to very quickly get an error message.

15
00:00:49,260 --> 00:00:54,240
So in general when we work with the raisin typescript we're making use of one specific type of element

16
00:00:54,270 --> 00:00:55,660
inside that array.

17
00:00:55,830 --> 00:01:00,480
We can technically put different types of values inside of an array but if we want to do so we have

18
00:01:00,480 --> 00:01:05,790
to be very explicit about it and add in a special little type annotation and we are going to look at

19
00:01:05,790 --> 00:01:07,950
a quick example of how to do that as well.

20
00:01:08,810 --> 00:01:09,150
All right.

21
00:01:09,170 --> 00:01:12,570
So as you might guess it's pretty critical to look at some code samples here.

22
00:01:12,570 --> 00:01:14,510
So that's the only definition we're going to get.

23
00:01:14,520 --> 00:01:18,610
Let's flip on over to our code editor and start writing out a little bit of code.

24
00:01:18,890 --> 00:01:24,090
So back inside my editor I'm going to make a new file inside of my root project directory called arrays

25
00:01:24,200 --> 00:01:27,090
dot T.S. than inside of here.

26
00:01:27,100 --> 00:01:33,490
I'm going to declare an array and just assign it to a variable I'll say const car makers is going to

27
00:01:33,490 --> 00:01:41,880
be an array of strings that has strings like Ford Toyota and Chevy like so if I now hover over that

28
00:01:41,880 --> 00:01:46,650
array right there you'll notice that I have an added on annotation that says that carmakers is going

29
00:01:46,650 --> 00:01:48,350
to be an array of strings.

30
00:01:48,450 --> 00:01:54,480
So this is type inference in action typescript took a look at the value inside this array right here

31
00:01:54,860 --> 00:01:56,990
and it said OK looks like those are all strings.

32
00:01:57,060 --> 00:02:03,450
So I guess carmakers is always going to point out an array that only contains strings.

33
00:02:03,490 --> 00:02:08,480
Now that's type inference doing that for us automatically remember if we wanted to be really explicit

34
00:02:08,480 --> 00:02:14,420
about this we could always put on a colon string and in square brackets like so.

35
00:02:14,440 --> 00:02:19,820
So that's a type invitation that says that this variable is always going to point at an array that contains

36
00:02:19,910 --> 00:02:26,310
nothing but strings we will sometimes want to add in type annotations when we are working with the race.

37
00:02:26,370 --> 00:02:32,100
So the case in which we would want to do that is if we initialize the array as an empty array like so

38
00:02:33,180 --> 00:02:37,920
in this case if we did not have the annotation on here typescript would not have enough information

39
00:02:37,920 --> 00:02:42,080
to understand what type of value was going to be inside that array.

40
00:02:42,090 --> 00:02:47,340
So for example if I now hover over carmakers it says any array and that means we can put any type of

41
00:02:47,340 --> 00:02:49,020
value inside there.

42
00:02:49,050 --> 00:02:52,770
Remember we want to avoid the any type as much as possible.

43
00:02:52,890 --> 00:02:58,980
So if we ever have to initialize an array as an empty array we will add on our annotation it's all put

44
00:02:58,980 --> 00:03:04,680
in string like so otherwise if we're going to initialize our array with some contents already inside

45
00:03:04,680 --> 00:03:09,380
of it then we don't need that annotation All right.

46
00:03:09,410 --> 00:03:12,540
Now we're not limited to just putting basic values inside of arrays.

47
00:03:12,540 --> 00:03:15,300
We can also put complex objects inside as well.

48
00:03:15,300 --> 00:03:18,810
So for example let's try creating a new array here called dates.

49
00:03:18,810 --> 00:03:25,710
And I'm going to be reading an array and assigning it a variety of new Date object instances by now

50
00:03:25,710 --> 00:03:26,580
hover over dates.

51
00:03:26,580 --> 00:03:33,920
Once again it'll tell me that this is going to be an array that contains instances of dates.

52
00:03:34,100 --> 00:03:40,810
Next up we can also write out two dimensional arrays inside of typescript very easily to do so.

53
00:03:40,820 --> 00:03:44,600
We're just going to double up on the syntax around that annotation we put together.

54
00:03:44,600 --> 00:03:50,750
So for example let's say we've got an array called cars by make and I want to have like a 2D array of

55
00:03:50,750 --> 00:03:52,300
strings inside of here.

56
00:03:52,370 --> 00:03:57,150
So inside of the first element of the outer array I'm going to put a new array inside of here.

57
00:03:57,260 --> 00:04:00,940
Then I'll put in like some actual model of car made by say Ford.

58
00:04:01,070 --> 00:04:07,930
So maybe an F1 50 and then at the second index I'll put in a car by taught me car by Toyota which is

59
00:04:07,930 --> 00:04:09,370
a Corolla.

60
00:04:09,530 --> 00:04:11,300
And then finally something by Chevy.

61
00:04:11,300 --> 00:04:13,700
How about a Camaro.

62
00:04:13,700 --> 00:04:14,840
Like so.

63
00:04:14,850 --> 00:04:19,850
So if we now hover over cars by make once again we'll see the type invitation for a two dimensional

64
00:04:19,850 --> 00:04:24,860
array in order to indicate a two dimensional Ray will write out the type of value that goes inside the

65
00:04:24,890 --> 00:04:26,150
inner array.

66
00:04:26,360 --> 00:04:30,120
Then one square bracket and a second square bracket.

67
00:04:30,120 --> 00:04:35,530
So that means that we're going to have an array that contains arrays of strings.

68
00:04:35,640 --> 00:04:41,030
Right there that's the array inner array of string indication right there once again we don't have to

69
00:04:41,030 --> 00:04:43,010
add in that annotation if we don't want to.

70
00:04:43,010 --> 00:04:47,920
The only time we would is if we didn't have any contents in the array when we initialized it.

71
00:04:47,930 --> 00:04:54,060
So in this case we would write out string square brackets great square bracket like so now like I said

72
00:04:54,270 --> 00:04:59,530
when we type in array we're putting on a restriction on what type of value we can put into it.

73
00:04:59,580 --> 00:05:01,140
So let's have a quick pause right here.

74
00:05:01,140 --> 00:05:04,170
When we come back the next video we'll see a very quick example of that.