Tuples in TypeScript
Tags: typescript, tuples, iti
Published: 2023-03-26 21:54:18

## 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 : 

```javascript
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:
    
![Tuple type error in IDE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ap6fml5nsipjrbz4ns4.png)

2- Second way : 

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

## Tuples advanced features

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

```javascript
 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:

![Spread usage output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ohx65s7eqqocoko8oyk.png)

- We can use them with _"Rest parameters"_ in a function:
 
```javascript
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 :

![function expected arguments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb7egzcn7ksmw0u8743i.png)

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

```javascript
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 : 

```javascript
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.