Tuples in TypeScript

What are Tuples?

Most of you know that TypeScript is type based. TypeScript offered a new datatype called "Tuple". This datatype is not in JavaScript. However it has some similarity with Arrays in JavaScript.

What differentiate Tuple from Array?

A few things :

1. Tuples are more strict version of Array.
2. You use it when you know the number of elements to be included.
3. You know the position and type of each element.
4. All elements should have different types to get full benefits of what the Tuple offers otherwise it won't be a Tuple anymore you could instead create an Array

How to declare Tuples in TypeScript?

1. Common way :

const student : [string, number, string, string] = ['Sarah', 12, 'Math', 'Science'];

Here the first element 'Sarah' is a string , second element 12
is number and so on.
If you tried to switch them up it will be compile time error:

2- Second way :

type Student = [string, number, string, string];

Tuples advanced features

• We can store more than one value using the "Spread operator":

 type Student = [string, number, string, string];
 type Class = [string, ...Student[]];
 const floor : Class[] = [
    ["1A",
     ['Sarah', 12, 'Math', 'Science'],
     ['John', 12, 'Math', 'Science'], 
     ['Peter', 12, 'Math', 'Science']
    ],
    ["1B",
      ['Nadine', 12, 'English', 'Spanish'],
      ['Alex', 12, 'English', 'Spanish'],
      ['Julia', 12, 'English', 'Spanish']
    ]
  ]

This is how the output will be:

• We can use them with "Rest parameters" in a function:

type Student = [string, number, string, string];
const createStudent = (...args : Student) => {};
createStudent('Sarah', 12 , 'Math', 'Science');

while calling createStudent function your editor will notify you of the function expect as a parameter like the following :

• We can deconstruct them using the "Spread operators" and be able to use them in a regular functions:

const createStudent = (name : string, grade : number, subject1 : string, subject2 : string) => {}
type Student = [string, number, string, string];
const student1 : Student = ['Sarah', 12, 'Math', 'Science'];
createStudent(...student1);

This is as if you did :

createStudent(student1[0], student1[1], student1[2], student1[3]);

Conclusion

1. Tuples are offered by Typescript to have more control on types and size unlike Arrays.
2. Tuples are more strict than Arrays.
3. It have fixed size and types and the types should be different.
4. You can use it in functions or creating variables with rest parameters or spread operators

Small, basic tuples are very useful in their own right but when you delve a bit deeper and combine with generics, rest elements and others you can achieve some interesting results.

Comments

[Gil Fewster]

Good overview, but this line is not corrrect:

All elements must have different types otherwise it won't be a Tuple anymore

For example, this is a perfectly valid tuple

type Point2D = [number, number] 

[Hayah Hazem]

Yes, your line of code is correct. I guess my phrasing failed to get what I meant across.
What I meant is that yes all your tuple elements can be of the same type but you would lose one of the tuple benefits by doing that why didn't from the start create an array.
Thank you for your feedback I will edit my article so that confusion doesn't happen anymore

[Gil Fewster]

I see what you mean. It’s worth noting that you still get another benefit, even if all elements are the same type — a tuple must always have the correct number of elements, whereas the length of a JavaScript array can always be changed.