Special kind of array in Typescript - Tuple | thejsdeveloper

In strictly typed programming languages, array is a Data structure of homogeneous data types with fixed length. In contrast JavaScript is dynamic. In here, array can have elements of heterogeneous data type and length can vary.

In JavaScript:

With Typescript, we can restrict that and force arrays to have homogeneous data type what I mean is this.

In Typescript:

Now if we try to push number or any other data type other than string in elements then Typescript will yell at us.

Even though Typescript enforces the type but length is still not fixed. We can push another element of type string in elements array.

What if our requirement changes like this:

Requirement 1:

An Array with type number, boolean and string only.

Solution

Well! that is easy, we can use union type with array in Typescript like this:

One point to note here is:

The sequence of the data type is not fixed as we defined during the declaration. What it means that, we can push number, boolean and string in any order.

For example, This is also perfectly valid and OK with TypeScript:

By Array<number|boolean|string>, we only narrowed the type and told Typescript that this collection should only have elements of type number, boolean and string. The order can be anything. Typescript do not mind as long as the type is one of the declared types.

Requirement 2 :

An array with a fixed number of items
type of elements are fixed at each index
The type of elements need not be same at all the index

What did you just say An array with a fixed number items ??

And it can have different type at different index? oh okkkk......

Solution

Actually this is possible with new type called tuple in Typescript.

Tuple - Special kind of Array

As per official docs:

Tuple types allow you to express an array with a fixed number of elements whose types are known, but need not be the same.

Tuple fulfils all the requirements described above. Let's see how can we define a tuple.

An array with a fixed number items

Just by doing this, now we fixed number of elements in info i.e. 3. So now if you try to access the element at index 4 Typescript will yell at you.

Type of elements are fixed at each index

By defining [number, string, boolean], we have fixed the type of elements at each index. Typescript will infer the type from tuple.

Advantage of doing this is, I can get all the methods available to string for item2.

Screenshot 2021-09-25 at 1.25.58 PM

The type of elements need not be same at all the index

The type of elements in tuple can be same as well as different:

Practical example:

You might be thinking, it looks great but where do we use it.

One of the examples that I can think of is in our custom hooks where we have to return an array consisting values of different data type. Take for example useToggle custom hook

Here we have to return current status of toggle and a function to change the status. That's why, the return type is a tuple [boolean, () => void].

If we simply return an array, and assign the second argument i.e. setter function to onClick, Typescript will throw a compile time error as the return type is union of boolean and () => void .

Screenshot 2021-09-25 at 1.59.21 PM

You can checkout these examples here:

Thank you for reading.

References

In JavaScript:

With Typescript, we can restrict that and force arrays to have homogeneous data type what I mean is this.

In Typescript:

Now if we try to push number or any other data type other than string in elements then Typescript will yell at us.

Even though Typescript enforces the type but length is still not fixed. We can push another element of type string in elements array.

What if our requirement changes like this:

Requirement 1:

An Array with type number, boolean and string only.

Solution

Well! that is easy, we can use union type with array in Typescript like this:

One point to note here is:

The sequence of the data type is not fixed as we defined during the declaration. What it means that, we can push number, boolean and string in any order.

For example, This is also perfectly valid and OK with TypeScript:

Requirement 2 :

An array with a fixed number of items
type of elements are fixed at each index
The type of elements need not be same at all the index

What did you just say An array with a fixed number items ??

And it can have different type at different index? oh okkkk......

Solution

Actually this is possible with new type called tuple in Typescript.

Tuple - Special kind of Array

As per official docs:

Tuple types allow you to express an array with a fixed number of elements whose types are known, but need not be the same.

Tuple fulfils all the requirements described above. Let's see how can we define a tuple.

An array with a fixed number items

Just by doing this, now we fixed number of elements in info i.e. 3. So now if you try to access the element at index 4 Typescript will yell at you.

Type of elements are fixed at each index

By defining [number, string, boolean], we have fixed the type of elements at each index. Typescript will infer the type from tuple.

Advantage of doing this is, I can get all the methods available to string for item2.

Screenshot 2021-09-25 at 1.25.58 PM

The type of elements need not be same at all the index

The type of elements in tuple can be same as well as different:

Practical example:

You might be thinking, it looks great but where do we use it.

One of the examples that I can think of is in our custom hooks where we have to return an array consisting values of different data type. Take for example useToggle custom hook

Here we have to return current status of toggle and a function to change the status. That's why, the return type is a tuple [boolean, () => void].

If we simply return an array, and assign the second argument i.e. setter function to onClick, Typescript will throw a compile time error as the return type is union of boolean and () => void .

Screenshot 2021-09-25 at 1.59.21 PM

You can checkout these examples here:

Thank you for reading.