1
00:00:00,610 --> 00:00:04,970
In this video, we're going to start to discuss arrays in TypeScript, as usual, we'll start off with

2
00:00:04,970 --> 00:00:09,220
the plain definition, then walk through some examples and then talk about why we care about these things

3
00:00:09,220 --> 00:00:10,030
and when to use them.

4
00:00:10,180 --> 00:00:11,500
So let's get to it first.

5
00:00:11,500 --> 00:00:12,460
A quick definition.

6
00:00:13,150 --> 00:00:17,620
When we work with the and typescript, we're essentially working with plain JavaScript arrays.

7
00:00:17,830 --> 00:00:20,970
So we still have all the features that you are already used to.

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

9
00:00:25,000 --> 00:00:30,120
We can map over an array right of foreach loop, use a for loop, all that kind of good stuff.

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

11
00:00:35,920 --> 00:00:37,550
consistent type into the array.

12
00:00:38,110 --> 00:00:42,940
So for example, if we make an array that is supposed to contain strings, we will only put strings

13
00:00:42,940 --> 00:00:43,600
inside there.

14
00:00:43,870 --> 00:00:48,590
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,180 --> 00:00:54,280
So in general, when we work with the Raisen typescript, we're making use of one specific type of element

16
00:00:54,280 --> 00:00:55,070
inside that array.

17
00:00:55,750 --> 00:01:00,490
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,490 --> 00:01:04,390
to be very explicit about it and add in a special little type annotation.

19
00:01:04,840 --> 00:01:07,630
And we are going to look at a quick example of how to do that as well.

20
00:01:08,680 --> 00:01:12,320
All right, so as you might guess, pretty critical to look at some code samples here.

21
00:01:12,490 --> 00:01:14,450
So that's the only definition we're going to get.

22
00:01:14,470 --> 00:01:17,970
Let's flip on over to our code editor and start writing out a little bit of code.

23
00:01:18,820 --> 00:01:24,070
So back inside my editor, I'm going to make a new file inside of my root project directory called ARray's

24
00:01:24,210 --> 00:01:25,120
Dotty's.

25
00:01:26,260 --> 00:01:31,390
Then inside of here, I'm going to declare an array and just assign it to a variable, they'll say const

26
00:01:31,390 --> 00:01:39,310
car makers is going to be an array of strings that have strings like Ford, Toyota and Chevy like so.

27
00:01:40,200 --> 00:01:45,600
If I now hover over that array right there, you'll notice that I have an added on annotation that says

28
00:01:45,600 --> 00:01:48,000
that carmakers is going to be an array of strings.

29
00:01:48,390 --> 00:01:51,210
So this is type inference in action type script.

30
00:01:51,510 --> 00:01:56,850
Took a look at the value inside this array right here and it said, OK, looks like those are all strings.

31
00:01:56,970 --> 00:02:01,800
So I guess carmakers is always going to point at an array that only contains strings.

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

33
00:02:08,460 --> 00:02:13,690
about this, we could always put on a clean string and then square brackets like so.

34
00:02:14,450 --> 00:02:19,890
So that's a type annotation that says that this variable is always going to point at an array that contains

35
00:02:19,890 --> 00:02:20,910
nothing but strings.

36
00:02:21,840 --> 00:02:27,210
We will sometimes want to add in type annotations when we are working with the race, so the case in

37
00:02:27,210 --> 00:02:32,130
which we would want to do that is if we initialize the array as an empty array like so.

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

39
00:02:37,930 --> 00:02:41,500
to understand what type of value was going to be inside that array.

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

41
00:02:47,020 --> 00:02:48,280
type of value inside there.

42
00:02:48,970 --> 00:02:52,420
Remember, we want to avoid the any type as much as possible.

43
00:02:52,850 --> 00:02:58,150
So if we ever have to initialize an array as an empty array, we will add on our annotation.

44
00:02:58,600 --> 00:03:00,100
So I'll put in a string like so.

45
00:03:01,100 --> 00:03:05,600
Otherwise, if we're going to initialize our array with some contents already inside of it, then we

46
00:03:05,600 --> 00:03:06,950
don't need that annotation.

47
00:03:08,990 --> 00:03:13,130
All right, now, we're not limited to just putting basic values inside of a race, we can also put

48
00:03:13,130 --> 00:03:14,730
complex objects inside as well.

49
00:03:15,230 --> 00:03:18,110
So, for example, let's try creating a new array here called Dates.

50
00:03:18,710 --> 00:03:24,590
And I'm going to be putting an array and assigning it a variety of new date object instances.

51
00:03:25,340 --> 00:03:29,600
If I now hover over dates once again, it'll tell me that this is going to be an array that contains

52
00:03:29,600 --> 00:03:31,370
instances of dates.

53
00:03:33,990 --> 00:03:40,770
Next up, we can also write out two dimensional arrays inside of TypeScript very easily to do so.

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

55
00:03:44,580 --> 00:03:48,390
So, for example, let's say we've got an array called cars by MAKE.

56
00:03:48,780 --> 00:03:51,750
And I want to have like a 2D array of strings inside of here.

57
00:03:52,320 --> 00:03:57,300
So inside of the first element of the outer array, I'm going to put a new array inside of here and

58
00:03:57,300 --> 00:04:00,980
then I'll put in like some actual model of car made by, say, Ford.

59
00:04:01,020 --> 00:04:02,430
So maybe an F one fifty.

60
00:04:03,290 --> 00:04:08,480
And then at the second index, I'll put in a car by my car by Toyota, which is a Corolla.

61
00:04:09,440 --> 00:04:16,190
And then finally, something by Chevy, how about a Camaro like so so if we now hover over our cars

62
00:04:16,190 --> 00:04:21,560
by make once again, we'll see the type invitation for a two dimensional array in order to indicate

63
00:04:21,560 --> 00:04:27,020
a two dimensional array will write out the type of value that goes inside the inner array, then one

64
00:04:27,020 --> 00:04:29,400
square bracket and a second square bracket.

65
00:04:30,050 --> 00:04:36,190
So that means that we're going to have an array that contains arrays of strings right there.

66
00:04:36,200 --> 00:04:38,690
That's the array array of string indication right there.

67
00:04:39,960 --> 00:04:42,820
Once again, we don't have to add in that annotation if we don't want to.

68
00:04:42,960 --> 00:04:47,290
The only time we would is if we didn't have any contents in the array when we initialized it.

69
00:04:47,880 --> 00:04:52,230
So in this case, we would write out string square brackets, square bracket like so.

70
00:04:53,280 --> 00:04:58,320
Now, like I said, when we type in Arae, we're putting on a restriction on what type of value we can

71
00:04:58,320 --> 00:04:59,010
put into it.

72
00:04:59,520 --> 00:05:01,110
So let's have a quick pause right here.

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