...

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