...

Web Technologies - TypeScript

Back to Course

Lesson Description


Lession - #1445 TypeScript Tuples

What are tuples TS?
A tuple is a TypeScript type that works like an array with some special considerations The number of elements of the array is fixed. The type of the elements is known. The type of the elements of the array need not be the same.

When should I use tuple TypeScript?
TypeScript tuples are like arrays with a fixed number of elements. They give us with a fixed size container that can store values of multiple types, where the order and structure are very important. This data type is best used when we know exactly how numerous types we want to allow in an array.

Syntax

vartuple_name = ( value1, value2, value3, value n>


For illustration 

var mytuple = ( 10," Hello">
;


You can also declare an empty tuple in Typescript and choose to initialize it later. 


var mytuple = (>
;
mytuple( 0>
 = 120
mytuple( 1>
 = 234


Accessing values in Tuples
Tuple values are individually called items. Tuples are index based. This means that items in a tuple can be accessed using their corresponding numeric index. Tuple item’s index starts from zero and extends up to n- 1( where n is the tuple’s size>
.

Syntax

tuple_name[index]>


illustration Simple Tuple 


var mytuple = ( 10," Hello">
;// create a tuple



console.log( mytuple( 0>
>

( mytuple( 1>
>


In the below illustration, a tuple, mytuple, is declared. The tuple contains values of numeric and string types independently.

On compiling, it'll generate the same code in JavaScript.

Its output is as follows −


10
Hello


illustration Empty Tuple 

var tup = (>

tup( 0>
 = 12
tup( 1>
 = 23

( tup( 0>
>

( tup( 1>
>


On compiling, it'll generate the same code in JavaScript.

Its output is as follows − 


12
23


Tuple Operations
Tuples in TypeScript supports various operations like pushing a new item, removing an item from the tuple,etc.

illustration

var mytuple = ( 10," Hello"," World"," typeScript">
;


console.log(" Items before push"mytuple.length>
// returns the tuple size 


( 12>
// append value to the tuple
(" Items after push"mytuple.length>

(" Items before pop"mytuple.length>

(mytuple.pop(>
" popped from the tuple">
// removes and returns the last item



(" Items after pop"mytuple.length>



The push(>
 appends an item to the tuple



The pop(>
 removes and returns the last value in the tuple



On compiling, it'll generate the same code in JavaScript.




The output of the below code is as follows −



Items before push 4
Items after push 5
Items before pop 5
12 popped from the tuple
Items after pop 4
Updating Tuples





Tuples are mutable which means you can update or change the values of tuple elements.




illustration



var mytuple = ( 10," Hello"," World"," typeScript">
;// create a tuple





console.log(" Tuple value at index 0" mytuple( 0>
>





 update a tuple element



mytuple( 0>
 = 121
(" Tuple value at index 0 changed to" mytuple( 0>
>



On compiling, it'll generate the same code in JavaScript.



The affair of the below law is as follows −




  • Tuple value at index 0 10

  • Tuple value at index 0 changed to 121


    

    Destructuring a Tuple
    
Destructuring refers to breaking up the structure of an entity. TypeScript supports destructuring when used in the context of a tuple.



    

    illustration
    

    
var a = ( 10," hello">
    
var( b, c>
     = a
console.log( b>
    
( c>
    


    



    
Online compiler

    • TypeScript Arrays TypeScript Object Types