1 00:00:01,120 --> 00:00:03,100 Now we've seen a couple of examples of arrays. 2 00:00:03,100 --> 00:00:06,010 I want to walk through some kind of corner cases around them. 3 00:00:06,010 --> 00:00:11,570 So essentially I want to discuss why we care about these rates like what's so big a deal about arrays 4 00:00:11,580 --> 00:00:14,530 and typescript that we're making this into a separate topic. 5 00:00:14,530 --> 00:00:15,220 Well here's why. 6 00:00:15,670 --> 00:00:20,320 When we work with the raisin typescript we got a couple of different advantages in a couple of different 7 00:00:20,320 --> 00:00:22,110 downsides as well. 8 00:00:22,150 --> 00:00:27,700 So first off typescript can help us when we make a typed array by helping us do type inference whenever 9 00:00:27,700 --> 00:00:30,820 we are pulling a value out of an array. 10 00:00:30,820 --> 00:00:32,890 Let's see a quick example of that. 11 00:00:32,930 --> 00:00:38,020 So back over inside my code editor I'm gonna put a little comma down right here and I'll say help with 12 00:00:38,170 --> 00:00:43,610 inference when extracting values. 13 00:00:43,610 --> 00:00:48,530 So in other words if we look at our carmaker's array right here we know that it is an array of strings 14 00:00:49,070 --> 00:00:52,190 typescript knows that as well through type inference. 15 00:00:52,230 --> 00:00:57,440 So that means that if we ever pull an element out of this array either by using say the pop method or 16 00:00:57,440 --> 00:01:03,950 by direct index access typescript will know that we are going to be pulling out a string and help us 17 00:01:03,950 --> 00:01:07,880 with type inference with the new variable that we're assigning this this value to. 18 00:01:08,390 --> 00:01:10,220 So let's take a look at an example of that. 19 00:01:10,220 --> 00:01:15,570 Let's say that I'm making a new variable right here and I'm going to call it something like car if I 20 00:01:15,570 --> 00:01:19,890 then take car makers and do an index access to it. 21 00:01:19,890 --> 00:01:24,660 I can now hover over a car and you'll see that type inference has come into play and typescript knows 22 00:01:24,660 --> 00:01:26,650 that this variable is going to be a string. 23 00:01:26,760 --> 00:01:32,010 It knows this because it knows that car makers is an array of strings and we just pulled one value out 24 00:01:32,010 --> 00:01:34,400 of it likewise. 25 00:01:34,400 --> 00:01:36,620 This also works if we try a pop method. 26 00:01:36,620 --> 00:01:38,880 So let's say we've got my car. 27 00:01:39,050 --> 00:01:44,330 Would you like car makers not pop like so to remove the last element in the array. 28 00:01:44,390 --> 00:01:48,060 Once again typescript knows that carmakers has an array of strings. 29 00:01:48,110 --> 00:01:53,690 So when we call pop it's going to return an instance of a string so we can once again hover over my 30 00:01:53,690 --> 00:02:00,130 car and we see yet typescript has correctly inferred that my car is going to be a string all right. 31 00:02:00,130 --> 00:02:03,470 So that's one benefit of making use of arrays and typescript. 32 00:02:03,540 --> 00:02:09,450 Secondly typescript can help us prevent from or help prevent us from adding in incompatible values into 33 00:02:09,450 --> 00:02:09,860 an array. 34 00:02:09,870 --> 00:02:12,090 If we have correctly type the array. 35 00:02:12,090 --> 00:02:20,830 So for example back over here once again we can say prevent in compatible values. 36 00:02:20,840 --> 00:02:26,240 So once again if we take our car makers array right here that only contains strings and we tried to 37 00:02:26,240 --> 00:02:31,550 add in some element that is not a string like let's say a number will very quickly see an error message 38 00:02:31,700 --> 00:02:36,710 typescript is telling us here hey you're trying to put in a number to a collection that is only supposed 39 00:02:36,710 --> 00:02:38,330 to contain strings. 40 00:02:38,360 --> 00:02:43,440 So that's going to help us from putting in dissimilar elements into one single array and once again 41 00:02:43,470 --> 00:02:47,790 if we want to have multiple different types in an array we definitely can do that. 42 00:02:47,790 --> 00:02:50,170 But we have to use some special syntax to do so. 43 00:02:50,220 --> 00:02:53,540 We'll take a look at an example of that in just a moment. 44 00:02:53,740 --> 00:02:53,970 All right. 45 00:02:53,960 --> 00:03:00,850 Third anytime we declare an array we get a lot of help with built in functions like map for each reduce. 46 00:03:00,860 --> 00:03:05,150 And so on whenever we are iterating over a collection of elements. 47 00:03:05,210 --> 00:03:11,890 So for example if we look back over once again we get help with map or for each and reduce. 48 00:03:11,920 --> 00:03:19,240 So for example if we do car makers map we can add in a function right here that will be called with 49 00:03:19,270 --> 00:03:21,210 every element in the array. 50 00:03:21,210 --> 00:03:27,700 So I'm going to receive each car as a string and from this I'm going to return say a string as well 51 00:03:27,710 --> 00:03:30,130 we'll just do a straight pass through here. 52 00:03:30,220 --> 00:03:37,210 So I'll take the car and return it immediately so typescript is going to make sure that these value 53 00:03:37,210 --> 00:03:43,490 that we are putting into this function right here will be a string and so because of that because typescript 54 00:03:43,490 --> 00:03:48,440 knows that car is going to be a string we get access to a lot of different autocomplete on the variable 55 00:03:48,440 --> 00:03:49,600 that comes in here. 56 00:03:49,610 --> 00:03:54,470 So for example if I put in a dot right after a car I can then see the auto complete appear with all 57 00:03:54,470 --> 00:03:56,300 the different methods that belong to strings. 58 00:03:56,390 --> 00:04:05,070 So for example I can do a two upper case like so so anytime we start working with map for each reduce 59 00:04:05,070 --> 00:04:10,470 or any similar helpers typescript is going to give us auto complete on the variable being passed into 60 00:04:10,470 --> 00:04:14,750 this function right here which is a nice little benefit all right. 61 00:04:14,750 --> 00:04:19,610 Now the last item we're going to talk about right here is that we can in fact put different types of 62 00:04:19,610 --> 00:04:24,090 elements inside of an array let's take a quick pause though because there's a couple of different corner 63 00:04:24,090 --> 00:04:27,830 cases around this and some interesting syntax we need to understand at the same time. 64 00:04:27,900 --> 00:04:30,050 It's a quick pause and I'll see you in just a minute.