0:04 typescript also introduces a new type
0:06 called tuples which we don't have in
0:08 JavaScript you might not tuples from
0:10 other programming languages but
0:12 JavaScript does not have
0:15 them so a typescript tuple is a fixed
0:17 length ordered collection of elements
0:20 where each element has a specific type
0:23 this means you explicitly Define the
0:25 type of values that can be stored in
0:27 each position of the Tuple ensuring type
0:30 safety and Clarity in your code
0:33 let's understand tuples with a simple
0:36 example let's go ahead and let's create
0:40 a simple array and let's call this array
0:43 employee and to this in order to create
0:44 an AR we are going to use a set of
0:47 square brackets and there let's say we
0:48 want to store the employee ID which is 1
0:51 123 we want to store the employee name
0:54 which is John let's say we also want to
0:57 store the employee salary maybe
1:00 2,000 and we also want to store a value
1:02 indicating whether the employee is
1:04 permanent employee or contract based
1:06 employee so here I'm also going to store
1:09 a Boolean value so when I say true that
1:11 means that employee John is permanent
1:15 employee if here we have the value false
1:16 that means that employee is not a
1:20 permanent employee so if I H over this
1:23 employee variable now you will see that
1:24 the data type of this employee variable
1:27 has been inferred as an array as you can
1:29 see it has been inferred as an array and
1:31 in that array we can store values of
1:35 type string or number or Boolean right
1:38 now let's say our requirement is that
1:41 this array should only hold four values
1:43 there should not be a fifth value for
1:46 this array and also the first element of
1:49 the array must be a number the second
1:51 element of the array must be a string
1:52 the third element of the array again
1:55 must be a number and the fourth element
1:58 of the array must be a Boolean value so
2:01 somehow we we want to implement these
2:04 restrictions on this array how can we do
2:07 that for that we can use
2:11 tuples so this Tuple it is basically an
2:13 array a tuple in typescript gets
2:16 compiled to an array in JavaScript okay
2:18 so a tuple is nothing but an array but a
2:22 tuple is fixed length and in the Tuple
2:25 we can specify the data type for each of
2:28 the elements now if I want to make this
2:30 employee array So currently this is an
2:32 array if I want to make this a tuple all
2:35 I have to do is after that I need to
2:37 specify the type so as I mentioned a
2:39 tuple is nothing but an array so again
2:42 we use a set of square brackets and in
2:44 there we specify the data type for each
2:46 element for example the first element
2:48 should be a number so I'll specify the
2:50 data type as number the second element
2:52 should be a string so I'll specify the
2:54 data type as string again third element
2:56 should be a number and fourth element
2:59 should be a Boolean value so here when
3:02 we are specifying the type of this
3:04 employee as duple there we have
3:07 specified four data types okay that
3:10 means this employee Tuple its length is
3:13 four it can only store four elements and
3:16 also in that Tuple the first element
3:18 must be a number the second element must
3:20 be a string the third element must be a
3:22 number again and the fourth element must
3:26 be a Boolean value okay so this is how
3:28 we are setting the type for this
3:32 employee Tuple so if we try to add a
3:35 Fifth Element to this duple let's say
3:38 120 a numeric value here we should have an
3:39 an
3:41 error as you can see here we have an
3:45 error and the error says this type is
3:47 not assignable to type number string
3:50 number Boolean Source has five elements
3:51 so the array which we are trying to
3:53 assign to this employee it has five
3:55 elements but the target allows only four
3:58 elements so you see we have an error
4:02 here but if I remove that Fifth
4:05 Element then we will not have any error
4:07 in the same way here you see the first
4:10 element of this Tuple must be a numeric
4:12 value so if I specify a Boolean value or
4:15 a string value here for example if I
4:17 specify false again we will have an
4:19 error and the error says the Boolean is
4:21 not assignable to type
4:24 number so here since we have specified
4:26 that the first element of this employee
4:29 Tuple must be a number if we specify the
4:31 first element as some other type A
4:34 Boolean value or a string value we will
4:37 get this error so it is not allowing
4:38 this as
4:41 well now let's try to go ahead and let's
4:43 try to log this employee Tuple in the developer
4:45 developer
4:48 console let's save the changes let's
4:57 file and as I mentioned earlier a tuple
5:00 in typescript gets converted to an array
5:02 in JavaScript so let me also show you
5:09 app.js and if we scroll down here you
5:13 will notice that that Tuple has been
5:15 compiled to JavaScript array so this
5:17 employee here it is not Tuple instead is
5:19 a normal array in
5:21 JavaScript now what is the advantage of
5:24 using a tuple in typescript it basically
5:28 allows us to create a fixed length array
5:30 and it also allows us to specify the
5:33 data type of each element explicitly we
5:35 don't have any such feature in
5:37 JavaScript and you might have also
5:40 noticed that whenever I open app. TS
5:43 file and app.js file at the same time
5:46 you will see these kind of Errors that's
5:48 because in the app. TS file we have
5:50 already defined a variable called
5:53 employee so in the app. TS it is saying
5:56 that this employee is already defined so
5:59 we cannot redeclare it but as soon as I
6:01 close this this file this app.js file
6:04 that error should be gone okay so we
6:06 have compiled the code and we are
6:08 logging the employee let's refresh the
6:11 page here and you will notice that that
6:13 employee Tuple has been logged here
6:15 basically here we are logging an array a
6:18 JavaScript array so this employee Tuple
6:20 which we created in typescript it got
6:24 compiled to JavaScript array all right
6:27 now when to use duple and when to use an
6:30 array well you can use a tuple over an
6:32 array when you want to enforce
6:34 strictness on the array like when you
6:37 want a fixed length array and also when
6:39 you want a specific data type for each
6:41 element in that
6:43 array another very important point which
6:45 I want to mention here is that when we
6:47 create a tuple we said that the Tuple
6:50 will have a fixed length so here when we
6:52 are specifying only four data types for
6:55 this Tuple that means this Tuple should
6:58 store only four elements and we saw that
7:00 when we tried to to assign a Fifth
7:03 Element here it throw an error but here
7:05 we also have an exception and the
7:08 exception is if I try to use push method
7:11 on this employee so this employees is
7:14 Tuple and on that we can call Push
7:17 method and if I try to push another
7:19 element inside this employee Tuple let's
7:22 say 100 here we are not getting any
7:27 error and let me put this console.log
7:30 statement after we have pushed this
7:32 element into the employee
7:34 Tuple okay so here we are not getting an
7:36 error ideally we should get an error
7:39 because inside this employee Tuple we
7:41 already have four elements and we are
7:43 trying to push a Fifth Element so here
7:46 we should get an error but when we use
7:48 push method it is an exception it does
7:50 not give us any error even if we go
7:57 code then also you will not see any
7:59 error and the code will be compiled
8:01 successfully and in the result you can
8:03 see that when the Tuple has been
8:06 converted to an array in that array we
8:09 have five elements so this you always
8:12 need to remember when working with Tuple
8:15 when you use push method at that time it
8:18 is not going to give you any error even
8:20 though the Tuple has already the number
8:23 of elements which it needs after that
8:25 also if we try to push a new element we
8:28 will not get any error so this is the
8:30 case with push method when we use it on
8:32 a tuple but generally if we try to
8:35 assign an array to a tuple where the
8:37 number of elements in that array is
8:39 different from what we have defined for
8:41 that Tuple we will get an error for
8:44 example if to this employee if I try to
8:47 assign a new array where I have a
8:52 numeric value then let's say the name is
8:55 Mark and then let's say the salary is
8:58 1,200 so you see we are getting an error
9:00 it says
9:02 that Source has only three elements but
9:04 the target requires four because we have
9:08 specified the length of this employ tle
9:11 S4 so if I specify the fourth
9:13 element let's say
9:16 false then we don't have any error but
9:20 as soon as I specify one more element
9:25 here we get error so in all other cases
9:28 it is going to work as expected but only
9:31 in case of push method it will not throw
9:34 any error so this is all from this
9:36 lecture if you have any questions
9:38 related to pupil then feel free to ask
9:40 it in the next lecture we are going to