TypeScript introduces tuples as a way to create fixed-length, ordered collections where each element has a specific, predefined type, offering enhanced type safety and code clarity beyond standard JavaScript arrays.
Key Points
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
typescript also introduces a new type
called tuples which we don't have in
JavaScript you might not tuples from
other programming languages but
JavaScript does not have
them so a typescript tuple is a fixed
length ordered collection of elements
where each element has a specific type
this means you explicitly Define the
type of values that can be stored in
each position of the Tuple ensuring type
safety and Clarity in your code
let's understand tuples with a simple
example let's go ahead and let's create
a simple array and let's call this array
employee and to this in order to create
an AR we are going to use a set of
square brackets and there let's say we
want to store the employee ID which is 1
123 we want to store the employee name
which is John let's say we also want to
store the employee salary maybe
2,000 and we also want to store a value
indicating whether the employee is
permanent employee or contract based
employee so here I'm also going to store
a Boolean value so when I say true that
means that employee John is permanent
employee if here we have the value false
that means that employee is not a
permanent employee so if I H over this
employee variable now you will see that
the data type of this employee variable
has been inferred as an array as you can
see it has been inferred as an array and
in that array we can store values of
type string or number or Boolean right
now let's say our requirement is that
this array should only hold four values
there should not be a fifth value for
this array and also the first element of
the array must be a number the second
element of the array must be a string
the third element of the array again
must be a number and the fourth element
of the array must be a Boolean value so
somehow we we want to implement these
restrictions on this array how can we do
that for that we can use
tuples so this Tuple it is basically an
array a tuple in typescript gets
compiled to an array in JavaScript okay
so a tuple is nothing but an array but a
tuple is fixed length and in the Tuple
we can specify the data type for each of
the elements now if I want to make this
employee array So currently this is an
array if I want to make this a tuple all
I have to do is after that I need to
specify the type so as I mentioned a
tuple is nothing but an array so again
we use a set of square brackets and in
there we specify the data type for each
element for example the first element
should be a number so I'll specify the
data type as number the second element
should be a string so I'll specify the
data type as string again third element
should be a number and fourth element
should be a Boolean value so here when
we are specifying the type of this
employee as duple there we have
specified four data types okay that
means this employee Tuple its length is
four it can only store four elements and
also in that Tuple the first element
must be a number the second element must
be a string the third element must be a
number again and the fourth element must
be a Boolean value okay so this is how
we are setting the type for this
employee Tuple so if we try to add a
Fifth Element to this duple let's say
120 a numeric value here we should have an
an
error as you can see here we have an
error and the error says this type is
not assignable to type number string
number Boolean Source has five elements
so the array which we are trying to
assign to this employee it has five
elements but the target allows only four
elements so you see we have an error
here but if I remove that Fifth
Element then we will not have any error
in the same way here you see the first
element of this Tuple must be a numeric
value so if I specify a Boolean value or
a string value here for example if I
specify false again we will have an
error and the error says the Boolean is
not assignable to type
number so here since we have specified
that the first element of this employee
Tuple must be a number if we specify the
first element as some other type A
Boolean value or a string value we will
get this error so it is not allowing
this as
well now let's try to go ahead and let's
try to log this employee Tuple in the developer
developer
console let's save the changes let's
file and as I mentioned earlier a tuple
in typescript gets converted to an array
in JavaScript so let me also show you
app.js and if we scroll down here you
will notice that that Tuple has been
compiled to JavaScript array so this
employee here it is not Tuple instead is
a normal array in
JavaScript now what is the advantage of
using a tuple in typescript it basically
allows us to create a fixed length array
and it also allows us to specify the
data type of each element explicitly we
don't have any such feature in
JavaScript and you might have also
noticed that whenever I open app. TS
file and app.js file at the same time
you will see these kind of Errors that's
because in the app. TS file we have
already defined a variable called
employee so in the app. TS it is saying
that this employee is already defined so
we cannot redeclare it but as soon as I
close this this file this app.js file
that error should be gone okay so we
have compiled the code and we are
logging the employee let's refresh the
page here and you will notice that that
employee Tuple has been logged here
basically here we are logging an array a
JavaScript array so this employee Tuple
which we created in typescript it got
compiled to JavaScript array all right
now when to use duple and when to use an
array well you can use a tuple over an
array when you want to enforce
strictness on the array like when you
want a fixed length array and also when
you want a specific data type for each
element in that
array another very important point which
I want to mention here is that when we
create a tuple we said that the Tuple
will have a fixed length so here when we
are specifying only four data types for
this Tuple that means this Tuple should
store only four elements and we saw that
when we tried to to assign a Fifth
Element here it throw an error but here
we also have an exception and the
exception is if I try to use push method
on this employee so this employees is
Tuple and on that we can call Push
method and if I try to push another
element inside this employee Tuple let's
say 100 here we are not getting any
error and let me put this console.log
statement after we have pushed this
element into the employee
Tuple okay so here we are not getting an
error ideally we should get an error
because inside this employee Tuple we
already have four elements and we are
trying to push a Fifth Element so here
we should get an error but when we use
push method it is an exception it does
not give us any error even if we go
code then also you will not see any
error and the code will be compiled
successfully and in the result you can
see that when the Tuple has been
converted to an array in that array we
have five elements so this you always
need to remember when working with Tuple
when you use push method at that time it
is not going to give you any error even
though the Tuple has already the number
of elements which it needs after that
also if we try to push a new element we
will not get any error so this is the
case with push method when we use it on
a tuple but generally if we try to
assign an array to a tuple where the
number of elements in that array is
different from what we have defined for
that Tuple we will get an error for
example if to this employee if I try to
assign a new array where I have a
numeric value then let's say the name is
Mark and then let's say the salary is
1,200 so you see we are getting an error
it says
that Source has only three elements but
the target requires four because we have
specified the length of this employ tle
S4 so if I specify the fourth
element let's say
false then we don't have any error but
as soon as I specify one more element
here we get error so in all other cases
it is going to work as expected but only
in case of push method it will not throw
any error so this is all from this
lecture if you have any questions
related to pupil then feel free to ask
it in the next lecture we are going to
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
