Typescript Tuples: How They Work

In Javascript, we are expecting a new primitive data type called a Tuple to appear soon. In Typescript, however, the concept of Tuple already exists.

A Tuple in Typescript is, much like in Javascript, an array, and it has a known length where every item has a known type.

How To Define a Tuple in Typescript

Defining a Tuple in Typescript is straightforward. All you need to do is define the type as an array of known types. For example, the following constant is a tuple:

const myTuple:[ string, number ] = [ "some", 15 ]

When we define first define a Tuple, it should be an array, it should have a known length, and each element should have a known type.

Defining an Array of Tuples in Typescript

We can also define an array of Tuples in Typescript. This is done by adding [] to the end of our Tuple type definition:

let myTuple:[ string, number ][] = [ [ "some", 15 ], [ "other", 20 ], [ "tuple", 50 ] ];

Mutating a Typescript Tuple

Unlike the tuple type in vanilla Javascript, Typescript Tuples by default are mutable - so they can be changed. As such, we can update a Tuple by simply referring to the element we want to update, and redefining it, assuming it isn't a constant:

let myTuple:[ string, number ] = [ "some", 15 ]
myTuple[1] = 20;

If we tried to change an element of our Tuple to a different type, however, we would get a type error. For example, if we tried to run myTuple[1] = "string", we would get the following error:

Type 'string' is not assignable to type 'number'.

Interestingly, if we try to extend the length of a Tuple by using myTuple.push(5), we will not get an error unless we are using push() on a constant, or if the type we use is not in the original type list.

This means that once a Tuple is defined, it no longer has to be of known length, as long as each element conforms to one of the original types we defined when first creating our Tuple. So myTuple.push(5) works in the case above - but myTuple.push(true) does not as true is boolean.

Creating Read-only Tuples in Typescript

If we want to create an immutable, read-only Tuple in Typescript, we can use the readonly keyword when defining our Tuple.

To do that, we would define our variable like this:

const myArray:readonly[number, string] = [10, 'test'];

If we try to mutate or change this Tuple, we will get an error. For example, if we use push() now, we will get the following error:

Property 'push' does not exist on type 'readonly [number, string]'.

Similarly, myArray[0] = 15 will return the following error:

Cannot assign to '0' because it is a read-only property.