1 00:00:00,880 --> 00:00:03,050 Now that we've got a basic understanding of what a couple is. 2 00:00:03,070 --> 00:00:06,720 Let's try writing on a little bit of code to understand how we work with them in typescript. 3 00:00:07,150 --> 00:00:12,250 So back and said my editor I'm gonna make another new file inside my project directory called topples 4 00:00:12,250 --> 00:00:15,730 dot T.S. INSIDE OF YOU'RE TO GET STARTED. 5 00:00:15,740 --> 00:00:20,270 I'M GONNA WRITE OUT AN OBJECT THAT LOOKS LIKE THAT DRINK object that we just put together or was inside 6 00:00:20,270 --> 00:00:21,340 that diagram. 7 00:00:21,540 --> 00:00:32,140 So I'll say cons drink is going to be an object with a color of brown carbonated is true and sugar is 8 00:00:32,220 --> 00:00:34,760 up 40 like so. 9 00:00:34,870 --> 00:00:37,050 So a object works perfectly here right. 10 00:00:37,090 --> 00:00:40,340 You and I can read this and very easily understand what's going on. 11 00:00:40,360 --> 00:00:45,670 However we have access to topples as well so we could alternatively try to represent this with a couple 12 00:00:46,420 --> 00:00:51,820 to do so we could write out let's say some new drink here like maybe Pepsi and I'm going to write out 13 00:00:51,820 --> 00:00:56,620 what looks like an array and I'm basically just going to take the different values out of this object 14 00:00:56,950 --> 00:01:03,700 and put them into this array in a very specific order so I'll put in Brown to represent the color then 15 00:01:03,700 --> 00:01:08,380 true to say that it's carbonated and then 48 to represent these sugar content. 16 00:01:08,380 --> 00:01:14,580 In this case like 40 grams say here's the only issue what we just defined right here is an array. 17 00:01:15,100 --> 00:01:19,120 So if you hover over Pepsi right here take a look at that type annotation. 18 00:01:19,360 --> 00:01:25,290 This is saying that Pepsi is going to be a string or a number or a boolean array. 19 00:01:25,510 --> 00:01:29,830 So the issue right now is that we could freely swap the order of elements inside of here. 20 00:01:30,100 --> 00:01:35,380 And in general we don't want to do that because remember the order inside of a table has a very specific 21 00:01:35,380 --> 00:01:36,490 meaning to us. 22 00:01:36,490 --> 00:01:41,200 You and I as developers have to memorize that the first element inside of here represents the color 23 00:01:41,730 --> 00:01:43,900 and the second element represents carbonation. 24 00:01:43,900 --> 00:01:46,460 And the third represents sugar content. 25 00:01:46,600 --> 00:01:51,930 So if you and I start to write out some code that's going to swap the order like let's say Pepsi at 26 00:01:51,940 --> 00:01:57,190 0 is now going to be 40 and Pepsi at 2 is now going to be brown. 27 00:01:57,370 --> 00:01:58,830 We have lost information. 28 00:01:59,260 --> 00:02:04,010 So you and I as developers have an assumption about the order of elements inside of here. 29 00:02:04,120 --> 00:02:10,110 And if we start to break that order our data model completely breaks down so we're not going to define 30 00:02:10,110 --> 00:02:15,690 this thing as a simple looking array and typescript instead we're going to add on an annotation to this 31 00:02:15,690 --> 00:02:21,930 thing this annotation is what's going to turn this line or this array right here into a couple. 32 00:02:21,960 --> 00:02:26,880 So right after Pepsi I'm going to put in a colon and then rather than putting out a type right here 33 00:02:27,120 --> 00:02:32,010 and then square brackets I'm going to instead put in a pair of square brackets and then inside of here 34 00:02:32,220 --> 00:02:38,260 we're going to write out the specific order of types of elements inside of this temple I want right 35 00:02:38,260 --> 00:02:41,940 write string then boolean then no. 36 00:02:42,000 --> 00:02:44,660 Like so. 37 00:02:44,690 --> 00:02:48,550 So this is what makes this thing into a tunnel as opposed to an array. 38 00:02:48,590 --> 00:02:53,600 We are saying that this array is going to always have a very consistent ordering of elements inside 39 00:02:53,600 --> 00:02:56,690 of it always a string then a billion then a number. 40 00:02:56,690 --> 00:03:01,400 So you and I as developers can read this thing right here and understand that there is some meaning 41 00:03:01,400 --> 00:03:07,490 to the order of elements inside of this array looking thing I should say trouble if we now try to change 42 00:03:07,490 --> 00:03:13,250 the order of elements inside of here and say Say Pepsi at 0 is now going to be 40 will very quickly 43 00:03:13,250 --> 00:03:14,630 get an error message. 44 00:03:14,630 --> 00:03:19,190 The error message is going to tell us that we're trying to assign a number to an index inside that tunnel 45 00:03:19,190 --> 00:03:21,230 that is supposed to be a string. 46 00:03:21,260 --> 00:03:26,510 So again by putting on this different looking type annotation right here we are turning this array into 47 00:03:26,540 --> 00:03:32,770 a couple an alternate way of writing this thing out right here rather than putting the type directly 48 00:03:32,770 --> 00:03:37,570 in line as an annotation would be to create something called a Type alias. 49 00:03:37,570 --> 00:03:41,060 We're going to discuss type aliases at great length later on inside this course. 50 00:03:41,170 --> 00:03:43,870 But this is a very good place to use a type alias. 51 00:03:43,870 --> 00:03:49,030 So we're just going to cover them very quickly right now as a quick aside so rather than having to repeat 52 00:03:49,060 --> 00:03:55,230 out this definition right here every time we want to create a drink we can instead right above right 53 00:03:55,240 --> 00:03:56,680 out type. 54 00:03:56,680 --> 00:04:01,770 And then maybe drink with a capital D and then we'll list out the temple structure. 55 00:04:01,780 --> 00:04:08,420 So it's going to be a string boolean and then no this does not create an array right here. 56 00:04:08,420 --> 00:04:10,080 So no array is being created. 57 00:04:10,130 --> 00:04:13,980 Instead it's creating the idea of a topple inside of application. 58 00:04:14,030 --> 00:04:18,850 It's a brand new type that we can freely use in any place that we would normally put a type. 59 00:04:18,920 --> 00:04:21,350 For example in a type annotation. 60 00:04:21,470 --> 00:04:26,060 So now rather than manually writing out all the different types right here I could instead say drink 61 00:04:26,150 --> 00:04:31,370 like so and this is a hundred percent equivalent to what we just had a moment before. 62 00:04:31,510 --> 00:04:39,790 So now I can very easily reuse this temple structure and say maybe sprite is also a type of drink and 63 00:04:39,790 --> 00:04:45,910 it will be clear it is carbonated and maybe it also has a lot of sugar in it maybe we also have tea 64 00:04:46,690 --> 00:04:54,990 that is a drink and maybe it's also brown not carbonated and zero sugar like so so we've now abstracted 65 00:04:54,990 --> 00:04:58,300 out the idea of what a drink is into a type alias. 66 00:04:58,320 --> 00:05:02,640 Now we can freely reuse it throughout our application to indicate that each of these different things 67 00:05:02,640 --> 00:05:03,970 are not plain arrays. 68 00:05:03,990 --> 00:05:09,670 Instead they are a couple that represents a very specific record inside of application. 69 00:05:09,910 --> 00:05:10,200 All right. 70 00:05:10,200 --> 00:05:14,180 Now I'm gonna be honest with you we are not going to use topples very often. 71 00:05:14,280 --> 00:05:15,660 So let's take a quick pause right here. 72 00:05:15,660 --> 00:05:19,950 We're gonna come back the next video we're gonna discuss why we care about the things and where we're 73 00:05:19,950 --> 00:05:20,830 going to use them. 74 00:05:20,910 --> 00:05:25,120 And we're going to find out that maybe temples are not super useful in typescript. 75 00:05:25,170 --> 00:05:27,240 It's a quick pause and I'll see you in just a minute.