24-Feb-2025

TypeScript’s tuple types allow you to define arrays with a fixed number of elements, where each element can have its own specific type. This provides type safety and clarity when working with arrays that represent a known structure.

Let’s imagine we need to represent coordinates in 2D space as an array of two numbers. With plain JavaScript arrays, we might do:

const coords = [10, 20];

This works, but what if we accidentally add a third element, or store a string instead of a number? There’s no compile-time check to prevent such errors.

Tuple types in TypeScript address this:

const coords: [number, number] = [10, 20]; 

Now, TypeScript knows coords must always contain two numbers. Let’s see what happens when we introduce errors:

const badCoords1: [number, number] = [10, 20, 30]; // Error: Type '[number, number, number]' is not assignable to type '[number, number]'.
const badCoords2: [number, number] = [10, "20"];    // Error: Type 'string' is not assignable to type 'number'.

TypeScript catches the errors during compilation, preventing runtime surprises.

Tuple types can also be used with rest elements (...) to allow a variable number of elements after a fixed set. For example, a function that takes a name and an arbitrary number of scores:

function recordScores(name: string, ...scores: [number, number, ...number[]]): void {
  console.log(`${name} scored: ${scores.join(', ')}`);
}

recordScores("Alice", 90, 85, 92); // Valid
recordScores("Bob", 70, "80", 88);  // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

//At least two scores are required after the name
recordScores("Charlie", 100) // Error: Expected at least 3 arguments, but got 2

Optional tuple elements can be defined using a question mark ?:

type Point = [number, number, number?];

const point3D: Point = [10, 20, 30]; // Valid
const point2D: Point = [10, 20];      // Also valid!

This example allows you to define both 2D and 3D points with a single type, providing flexibility while retaining type safety.

Tuple types are a powerful tool in TypeScript for enforcing data structure at compile-time, leading to more robust and maintainable code. They are particularly useful when working with functions that expect data in a specific format.