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 JavaScript’s 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 item’s index starts from zero and extends up to n-1(where n is the tuple’s 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