- 4 years ago
- Afaq Arif
- 3,730 Views
-
3
In this chapter, we will learn about tuples in TypeScript with examples. We will see how can we use tuples to store the set of values of different types in TypeScript.
Sometimes we need to store a set of values of different types. Arrays will not obey this purpose. TypeScript gives us a data type called tuple that helps to achieve such a purpose.
It shows a mixed set of values. In simple, tuples allow storing multiple fields of different types. They can also be passed as parameters to functions.
Syntax
var tuple_name = [value1,value2,value3,…value n]
For Example
var mytuple = [10,"Hello"];
You can also state 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 solely called items. Tuples are index-based. It means you can approach items in a tuple using their similar numeric index. Tuple item’s index starts from zero and increases to n-1(where n is the tuple’s size).
Syntax
Example: Simple Tuple
var mytuple = [10,"Hello"]; //create a tuple
console.log(mytuple[0])
console.log(mytuple[1])
In the above example, a tuple, mytuple, states. The tuple contains values of numeric and string types respectively.
It will run the same code in JavaScript on composing.
Its output is as follows.
Example: Empty Tuple
var tup = []
tup[0] = 12
tup[1] = 23
console.log(tup[0])
console.log(tup[1])
On composing, it runs the same code in JavaScript.
Its output is as follows.
Tuple Operations
Tuples in TypeScript carry various operations like pushing a new item, removing an item from the tuple, etc.
Example
var mytuple = [10,"Hello","World","typeScript"];
console.log("Items before push "+mytuple.length) // returns the tuple size
mytuple.push(12) // append value to the tuple
console.log("Items after push "+mytuple.length)
console.log("Items before pop "+mytuple.length)
console.log(mytuple.pop()+" popped from the tuple") // removes and returns the last item
console.log("Items after pop "+mytuple.length)
- The push() adds an item to the tuple
- The pop() removes and returns the last value in the tuple
It shows the same code in JavaScript on composing.
The output of the above 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 changeable. It means you can update or change the values of tuple elements.
Example
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
console.log("Tuple value at index 0 changed to "+mytuple[0])
On composing , it runs the same code in JavaScript.
It’s output is as follows.
Tuple value at index 0 10
Tuple value at index 0 changed to 121
Destructuring a Tuple
Destructuring refers to destroying up the structure of a body. TypeScript carries destructuring when used in the context of a tuple.
Example
var a =[10,"hello"]
var [b,c] = a
console.log( b )
console.log( c )
It will run the same code in JavaScript on composing.
//Generated by typescript 1.8.10
var a = [10, "hello"];
var b = a[0], c = a[1];
console.log(b);
console.log(c);
Its output is as follows.
- 4 years ago
- Afaq Arif
- 3,730 Views
-
3
