Tuples vs. Arrays in Typescript

TypeScript offers JavaScript developers a robust solution to writing bug-minimal code. It offers more types and stronger type-checking than JavaScript. We’ll be exploring tuples and arrays in TypeScript.

Typically, a tuple is an array with fixed size and known datatypes. This is to say; you’d use a tuple for a static, well-defined array:

• The number of elements of the array is fixed.
• The type of elements of the array need not be the same.
• The type of each element is known.

It is a TypeScript feature that lets you restrict an array to a specific amount and type of values. It has the signature of : [Type] that slightly differs from an array : Type[].

Let’s have an example

We have a privileges list:

const privileges: [number, number, number] = [1, 2, 3];

This privilege list will always have three elements and all of them have the type of number

We can also store a combination of data types in a tuple. Here’s an example:

const user: [string, id, boolean] = ["Jhon", 10001, true];

This user tuple will always have a fixed amount of values of three, and order for a string to come first, number the second, and the boolean to come third. If you mix the order of types or add a different amount of values, TS will throw an error.

We cannot assign values to a tuple that do not fit the type structure, so the next two snippets will throw errors:

const user: [string, id, boolean] = ["Jhon", 10001];

Or

const user: [string, boolean] = ["Jhon", 10001, true];

Using array instead

We can use an array with the previous case:

const user: [string, id, boolean] = ["Jhon", 10001, true];

Problems with Arrays

Arrays contain 0…n elements of the same type. But if we want to use an array structure with elements that may be different types… how do we know which index has what object or value?

If we use an array instead of tuples in the same cases we will not be able to make it strict to specific data and structure.

The structure of the tuple needs to stay the same (a string followed by a number, ..), whereas the array can have any combination of the three types specified (this can be extended to as many types as is required).

Tuples The Weird parts

You remember when said that the tuples only accept values that fit the data and the values that were specified to hold and if we tried to assign it to different values will throw an error, well well bud!

But I forget to say that TS is built on javascript and we all know wherever is the javascript weird things happen.

Here are some of them:

We can add new elements to using the array method .push() also, we can remove elements using .pop()

user.push(12);
console.log(user); // [ 'Jhon', 10001, true, 12 ]
user.pop(); // [ 'Jhon', 10001, true ]
user.pop(); // [ 'Jhon', 10001 ]

Just wanna say welcome to JavaScript ☠ 🤯

If you see this article useful please give me a clap and you can follow me here or on Twitter and LinkedIn for more articles and more posts about Javascript and Typescript…

See you again!