Tuples in TypeScript

Hayah Hazem — Sun, 26 Mar 2023 21:54:18 +0000

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 :

Tuples are more strict version of Array.
You use it when you know the number of elements to be included.
You know the position and type of each element.
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?

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

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