TypeScript - Tuples

Quiz

At times, there might be a need to store a collection of values of varied types. Arrays will not serve this purpose. TypeScript gives us a data type called tuple that helps to achieve such a purpose.

It represents a heterogeneous collection of values. In other words, tuples enable storing multiple fields of different types. Tuples can also be passed as parameters to functions.

Syntax

We can create a tuple using JavaScripts array syntax:

const tupleName = [value1, value2, value3, ...valueN]

But we need to declare its type as a tuple.

const tupleName: [type1, type2, type3, ...typeN] = [value1, value2, value3, ...valueN]

For Example

const myTuple: [number, string] = [10,"Hello"];

You can define a tuple first and then initialize,

let myTuple: [number, string]; // declaring the tuple
myTuple = [10, "Hello"]; // initializing the tuple

Make sure, the const tuple declared must be initialized.

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

var myTuple = []; 
myTuple[0] = 10;
myTuple[1] = "Hello";

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 items index starts from zero and extends up to n-1(where n is the tuples size).

Syntax

Following is the syntax to access the values in a tuple using its index −

tupleName[index]

Example: Simple Tuple

var myTuple: [number, string] = [10,"Hello"]; //create a tuple 
console.log(myTuple[0]) 
console.log(myTuple[1])

In the above example, a tuple, myTuple, is declared. The tuple contains values of numeric and string types respectively.

On compiling, it will generate the following code in JavaScript.

var myTuple = [10, "Hello"]; //create a tuple 
console.log(myTuple[0]);
console.log(myTuple[1]);

Its output is as follows −

10 
Hello

Example: Empty Tuple

We can declare an empty tuple as follows and then initialize it.

var tup = [] 
tup[0] = 12 
tup[1] = 23 

console.log(tup[0]) 
console.log(tup[1])

On compiling, it will 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.

Example

var myTuple: [number, string, string, string]; 
myTuple = [10,"Hello","World","typeScript"]; 
console.log("Items before push " + myTuple.length)

myTuple.push(12) // append value to the tuple 
console.log("Items after push " + myTuple.length) 
console.log("Items before pop " + myTuple.length)
 
// removes and returns the last item
console.log(myTuple.pop() + " popped from the tuple") 
console.log("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 will generate the following code in JavaScript.

var myTuple;
myTuple = [10, "Hello", "World", "typeScript"];
console.log("Items before push " + myTuple.length);
myTuple.push(12); // append value to the tuple 
console.log("Items after push " + myTuple.length);
console.log("Items before pop " + myTuple.length);
// removes and returns the last item
console.log(myTuple.pop() + " popped from the tuple"); 
console.log("Items after pop " + myTuple.length);

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 mutable which means you can update or change the values of tuple elements.

Example

var myTuple: [number, string, string, string]; // define tuple
myTuple = [10,"Hello","World","typeScript"]; // initialize 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 compiling, it will generate the following code in JavaScript.

var myTuple; // define tuple
myTuple = [10, "Hello", "World", "typeScript"]; // initialize 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]);

The output of the above code 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.

Example

var a: [number, string] = [10,"hello"];
var [b, c] = a;
console.log( b );    
console.log( c );

On compiling, it will generate following JavaScript code.

var a = [10, "hello"];
var b = a[0], c = a[1];
console.log(b);
console.log(c);

Its output is as follows −

10
hello

Function Parameters and Tuple Types

We can define a function to accept explicitly a tuple type. So while calling the function we pass the tuple as argument.

Example

function processData(data: [string, number]): void {
    const [name, age] = data;
    console.log(`Name: ${name}, Age: ${age}`);
}
let data: [string, number] = ["John", 32]
processData(data);

We defined here a function processData() that accepts a parameter of tuple type. Inside the function we use tuple destructuring to get the constituent elements. We call the function passing a tuple as argument.

On compiling, it will generate the following JavaScript code.

function processData(data) {
    const [name, age] = data;
    console.log(`Name: ${name}, Age: ${age}`);
}
let data = ["John", 32];
processData(data);

The output of the above code is as follows −

Name: John, Age: 32

Print Page