TypeScript Tuples Explained

let's take a look at the second most important data structure of Type-level TypeScript – Tuples.
Tuples are much more interesting than Arrays at the type level.
In fact, they are the real arrays of type-level programs. In this chapter, we are going to learn why they are so useful and how to use all their awesome features.
Tuple types define sets of arrays with a fixed length, and each index can contain a value of a different type. For example, the tuple [string, number] defines the set of arrays containing exactly two values, where the first value is a string and the second value is a number.

Tuples are essentially lists of types! They can contain zero, one, or many items, and each one can be a completely different type. Unlike unions, types in a tuple are ordered and can be present more than once. They look just like JavaScript arrays and are their type-level equivalent:

type Empty = [];
type One = [1];
type Two = [1, "2"]; // types can be different!
type Three = [1, "2", 1]; // tuples can contain duplicates

Reading indices of a tuple

Just like with JS arrays, you can access a value inside a tuple by using a numerical index:

type SomeTuple = ["Irena", 30];

type Name = SomeTuple[0]; // "Itena"
type Age = SomeTuple[1]; // 30

The only difference is that tuples are indexed by number literal types and not just numbers.

So, in TypeScript, tuples are a special type of array where:

The types of the elements are fixed and known.
Each element in the tuple can have a different type.
Tuples allow you to define an array with a fixed number of elements, where each element can have a distinct type. This is useful for representing data that comes in pairs or groups where the types are different for each element.

Tuple Syntax

To define a tuple in TypeScript, you use square brackets [], where each element has a specific type, separated by commas.

let tuple: [type1, type2, type3];

Basic Tuple Example

// A tuple with a string, a number, and a boolean
let person: [string, number, boolean] = ['Irena', 30, true];

console.log(person[0]);  // Output: 'Irena'
console.log(person[1]);  // Output: 30
console.log(person[2]);  // Output: true

In this case:

The first element must be a string ('Irene').
The second element must be a number (30).
The third element must be a boolean (true).

Why Use Tuples?

Structured Data: When you want to group different types of data together in a predictable format.
Fixed Length: Tuples have a known, fixed length and order, unlike regular arrays where the number of elements can vary.
Type Safety: You get type safety at compile time since each position in the tuple has a known type.

Tuple vs. Array

An array can have any number of elements of a single type or multiple types.
A tuple has a fixed number of elements, and the types of each element are predefined.

For example:

let names: string[] = ['Alice', 'Bob'];  // Array of strings
let personInfo: [string, number] = ['Alice', 25];  // Tuple with a string and a number

Accessing Tuple Elements

You can access tuple elements just like you do with arrays, using index notation.

let person: [string, number, boolean] = ['Irena', 30, true];

console.log(person[0]);  // 'Irena'
console.log(person[1]);  // 30

Optional Elements in Tuples

Tuples can also have optional elements. Optional elements must come at the end of the tuple.

let person: [string, number?] = ['Alice'];

Tuple Example in a Practical Use Case (Vue/React Project)
Let's say you are creating a portfolio project where you want to display a list of skills and their categories. You could use tuples to represent these skill categories and the associated technologies.

// Define a tuple for each skill
let frontEndSkill: [string, string] = ['Front-End', 'HTML, CSS, JavaScript, React'];
let backEndSkill: [string, string] = ['Back-End', 'Node.js, Express, MongoDB'];
let toolsSkill: [string, string] = ['Tools', 'Git, Docker, Jenkins'];

// Now you can create an array of tuples
let skills: [string, string][] = [
  frontEndSkill,
  backEndSkill,
  toolsSkill
];

// Loop through and display them (in a Vue component for instance)
skills.forEach(([category, techs]) => {
  console.log(`Category: ${category}, Technologies: ${techs}`);
});

In this example:

Each skill is represented as a tuple with two elements: a category (e.g., "Front-End") and a list of technologies (e.g., "HTML, CSS, JavaScript, React").
The tuple enforces that each skill must be defined in this format: first a string for the category, then a string for the technologies.

Tuples with Destructuring

You can use destructuring to easily extract the values from a tuple.

let skill: [string, string] = ['Front-End', 'HTML, CSS, JavaScript'];

// Destructure the tuple
let [category, technologies] = skill;

console.log(category);  // 'Front-End'
console.log(technologies);  // 'HTML, CSS, JavaScript'

Rest Elements in Tuples (it is Advanced, more in another article)

TypeScript 4.0 introduced rest elements in tuples, allowing more flexible tuple types with variadic arguments.

// Tuple with a fixed first element and a rest element
let tuple: [string, ...number[]] = ['Alice', 10, 20, 30];

console.log(tuple);  // ['Alice', 10, 20, 30]

Key Points to Remember:
Tuples allow fixed-length, ordered collections of different types.
Useful for structured data like coordinates, pairs of values (e.g., key-value pairs), or when working with APIs that return mixed-type results.
Tuples are type-safe and can help ensure consistency in the order and types of the data.

For example if you want to build a Portfolio (Vue.js) Project:
Here’s how you could use a tuple in a Vue.js project to display your tech skills:

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      // Define an array of tuples for skill categories
      skills: [
        ['Front-End', 'HTML, CSS, JavaScript, Vue.js'],
        ['Back-End', 'Node.js, Express, MongoDB'],
        ['DevOps', 'Docker, Jenkins, Git']
      ] as [string, string][]  // Type annotation: array of tuples
    }
  }
});
</script>

<template>
  <div>
    <h1>My Skills</h1>
    <ul>
      <li v-for="([category, technologies], index) in skills" :key="index">
        <strong>{{ category }}:</strong> {{ technologies }}
      </li>
    </ul>
  </div>
</template>

This would render:

My Skills:
- Front-End: HTML, CSS, JavaScript, Vue.js
- Back-End: Node.js, Express, MongoDB
- DevOps: Docker, Jenkins, Git

In this example, the skills array consists of tuples where each tuple represents a skill category and the technologies within that category. The Vue template then loops through the tuples and displays each skill category with its corresponding technologies.

Lets summarized

A tuple is a type in TypeScript used to represent an array where the type of a fixed number of elements is known, but not for all elements. It provides a way to represent the ordered set of element types for given elements in a TypeScript array . A tuple always has a fixed number of elements and each of them has their types associated with it.

Tuple types define sets of arrays with a fixed length, and each index can contain a value of a different type. For example, the tuple [string, number] defines the set of arrays containing exactly two values, where the first value is a string and the second value is a number.

Happy coding!

Tuples in TypeScript