1
00:00:00,800 --> 00:00:04,580
Now that we've got a basic understanding of what a tuple is, let's try writing a little bit of code

2
00:00:04,580 --> 00:00:06,580
to understand how we work with them in TypeScript.

3
00:00:07,070 --> 00:00:12,260
So back inside my editor, I'm going to make another new file inside my project directory called Tuples

4
00:00:12,270 --> 00:00:13,160
Dots.

5
00:00:14,360 --> 00:00:18,200
And inside, if you're to get started, I'm going to write out an object that looks like that drink

6
00:00:18,200 --> 00:00:23,180
object that we just put together or was inside that diagram, so I'll say can't drink is going to be

7
00:00:23,180 --> 00:00:26,300
an object with a color of brown.

8
00:00:27,200 --> 00:00:29,480
Carbonated is true.

9
00:00:29,750 --> 00:00:30,530
And sugar.

10
00:00:31,580 --> 00:00:37,090
Is up 40 like so so a object works perfectly here, right?

11
00:00:37,220 --> 00:00:39,700
And I can read this and very easily understand what's going on.

12
00:00:40,280 --> 00:00:42,920
However, we have access to tuples as well.

13
00:00:42,920 --> 00:00:46,880
So we could alternatively try to represent this with a tuple to do so.

14
00:00:46,880 --> 00:00:50,330
We could write out, let's say, some new drink here, like maybe Pepsi.

15
00:00:50,960 --> 00:00:52,940
And I'm going to write out what looks like an array.

16
00:00:53,090 --> 00:00:57,920
And I'm basically just going to take the different values out of this object and put them into this

17
00:00:57,920 --> 00:00:59,630
array in a very specific order.

18
00:01:00,170 --> 00:01:03,710
So I'll put in Brown to represent the color then.

19
00:01:03,710 --> 00:01:09,620
True to say that it's carbonated and then 48 to represent the sugar content in this case, like 40 grams,

20
00:01:09,620 --> 00:01:11,540
say here's the only issue.

21
00:01:11,990 --> 00:01:14,580
What we just defined right here is an array.

22
00:01:15,020 --> 00:01:18,740
So if you hover over Pepsi right here, take a look at that type annotation.

23
00:01:19,310 --> 00:01:24,650
This is saying that Pepsi is going to be a string or a number or a boolean array.

24
00:01:25,460 --> 00:01:29,570
So the issue right now is that we could freely swap the order of elements inside of here.

25
00:01:30,020 --> 00:01:34,910
And in general, we don't want to do that because remember, the order inside of a tuple has a very

26
00:01:34,910 --> 00:01:36,140
specific meaning to us.

27
00:01:36,390 --> 00:01:38,720
You and I as developers have to memorize that.

28
00:01:38,720 --> 00:01:43,880
The first element inside of here represents the color and the second element represents carbonation

29
00:01:43,880 --> 00:01:45,840
and the third represents sugar content.

30
00:01:46,520 --> 00:01:51,830
So if you and I start to write out some code that's going to swap the order, like, let's say Pepsi

31
00:01:51,830 --> 00:01:58,850
at zero is now going to be 40 and Pepsi at two is now going to be brown, we have lost information.

32
00:01:59,180 --> 00:02:03,800
So you and I as developers have an assumption about the order of elements inside of here.

33
00:02:04,010 --> 00:02:07,850
And if we start to break that order, our data model completely breaks down.

34
00:02:08,830 --> 00:02:13,930
So we're not going to define this thing as a simple looking array and TypeScript, instead we're going

35
00:02:13,930 --> 00:02:15,990
to add on an annotation to this thing.

36
00:02:16,540 --> 00:02:21,250
This annotation is what's going to turn this line or this array right here into a tuple.

37
00:02:21,910 --> 00:02:24,280
So right after a Pepsi, I'm going to put in a colon.

38
00:02:24,550 --> 00:02:29,230
And then rather than putting out a typewrite here and then square brackets, I'm going to instead put

39
00:02:29,230 --> 00:02:30,720
in a pair of square brackets.

40
00:02:31,120 --> 00:02:36,490
And then inside of here, we're going to write out the specific order of types of elements inside of

41
00:02:36,490 --> 00:02:42,490
this tuple sandwiched right string then boolean then no, like so.

42
00:02:44,640 --> 00:02:48,310
So this is what makes this thing into a tuple as opposed to an array.

43
00:02:48,540 --> 00:02:53,610
We are saying that this array is going to always have a very consistent ordering of elements inside

44
00:02:53,610 --> 00:02:56,020
of it, always a string than a boolean than a number.

45
00:02:56,640 --> 00:03:01,410
So you and I as developers can read this thing right here and understand that there is some meaning

46
00:03:01,410 --> 00:03:05,460
to the order of elements inside of this array looking thing, or I should say tuple.

47
00:03:06,210 --> 00:03:11,610
If we now try to change the order of elements inside of here and say, say, Pepsi at zero is now going

48
00:03:11,610 --> 00:03:16,230
to be 40, will very quickly get an error message, your message is going to tell us that we're trying

49
00:03:16,230 --> 00:03:19,170
to assign a number to an index inside that tuple.

50
00:03:19,170 --> 00:03:20,440
That is supposed to be a string.

51
00:03:21,210 --> 00:03:25,950
So, again, by putting on this different looking type annotation right here, we are turning this array

52
00:03:25,950 --> 00:03:27,180
into a tuple.

53
00:03:28,270 --> 00:03:33,130
An alternate way of writing this thing out right here, rather than putting the type directly in line

54
00:03:33,130 --> 00:03:36,910
as an annotation, would be to create something called a type alias.

55
00:03:37,530 --> 00:03:40,930
We're going to discuss type aliases at great length later on inside this course.

56
00:03:41,140 --> 00:03:43,840
But this is a very good place to use a type alias.

57
00:03:43,840 --> 00:03:46,900
So we're just going to cover them very quickly right now as a quick aside.

58
00:03:47,530 --> 00:03:52,330
So rather than having to repeat out this definition right here, every time we want to create a drink,

59
00:03:52,900 --> 00:04:00,130
we can instead right above right out type and then maybe drink with a capital D and then we'll list

60
00:04:00,130 --> 00:04:01,740
out the tuple structure.

61
00:04:01,750 --> 00:04:05,380
So it's going to be a string boolean and then no.

62
00:04:06,400 --> 00:04:11,050
This does not create an array right here, so no array is being created, instead it's creating the

63
00:04:11,050 --> 00:04:13,640
idea of a tuple inside of our application.

64
00:04:13,930 --> 00:04:19,390
It's a brand new type that we can freely use in any place that we would normally put a type, for example,

65
00:04:19,390 --> 00:04:20,560
in a type annotation.

66
00:04:21,420 --> 00:04:26,130
So now, rather than manually writing out all the different types right here, I could instead say drink

67
00:04:26,130 --> 00:04:30,660
like so, and this is a 100 percent equivalent to what we just had a moment before.

68
00:04:31,470 --> 00:04:36,090
So now I can very easily reuse this tuple structure and say maybe Sprite.

69
00:04:37,460 --> 00:04:43,940
Is also a type of drink, and it will be clear it is carbonated and maybe it also has a lot of sugar

70
00:04:44,480 --> 00:04:51,620
and it may be we also have tea that is a drink, and maybe it's also brown, not carbonated and zero

71
00:04:51,620 --> 00:04:52,460
sugar like so.

72
00:04:53,860 --> 00:04:58,060
So we've now abstracted out the idea of what a drink is into a type alias.

73
00:04:58,240 --> 00:05:02,620
Now we can freely reuse it throughout our application to indicate that each of these different things

74
00:05:02,620 --> 00:05:03,730
are not plenaries.

75
00:05:03,910 --> 00:05:08,620
Instead, they are a tuple that represents a very specific record inside of application.

76
00:05:09,760 --> 00:05:13,870
All right, now, I'm going to be honest with you, we are not going to use tuples very often.

77
00:05:14,200 --> 00:05:15,630
So let's take a quick pause right here.

78
00:05:15,640 --> 00:05:16,810
We're going to come back to the next video.

79
00:05:16,960 --> 00:05:20,800
We're going to discuss why we care about these things and where we're going to use them.

80
00:05:20,800 --> 00:05:25,030
And we're going to find out that maybe tuples are not super useful in TypeScript.

81
00:05:25,190 --> 00:05:27,220
It's a quick pause and I'll see you in just a minute.