DEV Community

Cover image for Tuples in TypeScript

Tuples in TypeScript

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'];
Enter fullscreen mode Exit fullscreen mode

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}`);
});
Enter fullscreen mode Exit fullscreen mode

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'

Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

This would render:

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

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!

Top comments (0)