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!
Top comments (0)