Explain the Tuple Types in TypeScript

We will learn about the tuple types in TypeScript. In JavaScript, an array can contain elements of different data types. Still, as TypeScript is a superset of JavaScript and type-strict language, a TypeScript array can contain only single types of elements.

So, the tuple allows us to store elements of the different data types in the TypeScript array. Also, when we store elements inside the tuple, the order of elements is important; Otherwise, the TypeScript compiler can generate an error while compiling the code.

Syntax

You can follow the syntax below to define the tuples in TypeScript.

let sample_tuple: [string, number, data_types of other variables ...];
sample_tuple = ['TypeScript', 95, other values according to data types];

In the above syntax, users can see that we need to define the data type of the value we want to put at every index. It can contain multiple elements as much as users want to store but need to define the type for every index.

Example 1 (Defining the Tuple)

In the example below, we have created the tuple of length four. The tuple contains the number at the first index, Boolean at the second index, and string and number at the third and fourth index, respectively.

Users can comment out the code given at last and try to compile it to see what error it gives when we add more elements in the tuple or elements in the random order.

// defining the tuple of length four
let sample_tuple: [number, boolean, string, number] = [
   10,
   true,
   "TutorialsPoint",
   90,
];

let values: string =
   sample_tuple[0] +
   " " +
   sample_tuple[1] +
   " " +
   sample_tuple[2] +
   " " +
sample_tuple[3];
console.log("The value of tuple elements is " + values);

On compiling, it will generate the following JavaScript code −

// defining the tuple of length four
var sample_tuple = [
   10,
   true,
   "TutorialsPoint",
   90,
];
var values = sample_tuple[0] +
   " " +
   sample_tuple[1] +
   " " +
   sample_tuple[2] +
   " " +
   sample_tuple[3];
console.log("The value of tuple elements is " + values);

Output

The above code will produce the following output −

The value of tuple elements is 10 true TutorialsPoint 90

Example 2 (Array of Tuples)

In this example, we have defined the type of the tuple. After that, we create the array of type array_tuple, which contains the multiple tuples.

Users can see how we can access the values from a particular tuple, like the two-dimensional array.

//  defining the type for the tuple array

//  tuple is of length two containing the number and boolean value
type array_tuple = [number, boolean];

//  defining the array of tuple
let array: array_tuple[] = [
   [1, true],
   [2, false],
   [3, false],
   [4, true],
];

// accessing the values from the different index of tuple
console.log("The value of index 1 is " + array[1]);
console.log("The value of index 2 is " + array[2]);
console.log(
   "The value of index 3 and 2nd index in the nested array is " + array[3][1]
);

On compiling, it will generate the following JavaScript code −

//  defining the array of tuple
var array = [
   [1, true],
   [2, false],
   [3, false],
   [4, true],
];

// accessing the values from the different index of tuple
console.log("The value of index 1 is " + array[1]);
console.log("The value of index 2 is " + array[2]);
console.log("The value of index 3 and 2nd index in the nested array is " + array[3][1]);

Output

The above code will produce the following output −

The value of index 1 is 2,false
The value of index 2 is 3,false
The value of index 3 and 2nd index in the nested array is true

Example 3 (Adding Values to the Tuple)

In the example below, we have created the tuple of type boolean and number. While initializing the tuple, we can’t add more values than defined in the tuple type. While initializing the tuple, we need to initialize it with one number and one boolean value in the same order defined in the tuple type.

After that, to add values to the tuple, we can use the push() method, as used in the example below.

// creating the tuple of type number and boolean
var tuple: [boolean, number] = [true, 20];

// adding only a boolean value
tuple.push(false);

// pushing only number values
tuple.push(99);

// pushing number and boolean both
tuple.push(101, true);
console.log("The values of the tuple is " + tuple);

// tuple doesn't allow to push the elements of string type as 

// it can contain an only number and boolean values

// tuple.push("hi");

On compiling, it will generate the following JavaScript code −

// creating the tuple of type number and boolean
var tuple = [true, 20];

// adding only a boolean value
tuple.push(false);

// pushing only number values
tuple.push(99);

// pushing number and boolean both
tuple.push(101, true);
console.log("The values of the tuple is " + tuple);

// tuple doesn't allow to push the elements of string type as
 
// it can contain an only number and boolean values

// tuple.push("hi");

Output

The above code will produce the following output −

The values of the tuple is true,20,false,99,101,true

Example 4 (Return Tuple from Function)

In this example, we have created the function getIntAndString(), which returns the tuple of type number and string. One main benefit of the tuple is that it can be used to return multiple values from the function.

Also, users can learn to destruct the tuple into another tuple returned from the function via the example below.

//  function, which returns the tuple of type number and string
function getIntAndString(): [number, string] {
  return [10, "TutorialsPoint!"];
}

// stored returned tuple from the function
let tuple: [number, string] = getIntAndString();

console.log("The value of the tuple is " + tuple);

On compiling, it will generate the following JavaScript code −

//  function, which returns the tuple of type number and string
function getIntAndString() {
   return [10, "TutorialsPoint!"];
}

// stored returned tuple from the function
var tuple = getIntAndString();
console.log("The value of the tuple is " + tuple);

Output

The above code will produce the following output −

The value of the tuple is 10,TutorialsPoint!

We have learned about the tuple types in this tutorial. Also, we have taken different examples to demonstrate the different uses of the tuple. We learned to create a tuple, access elements from the tuple, create an array of the tuple, and use a tuple to return multiple values from the function.