Tuple Types

Tuple Types

What it is

Tuple types are arrays with fixed length where each element can have a specific type. They provide type safety for fixed-length arrays.

Before this feature

Arrays couldn’t enforce length or per-element types:

// Regular array - any length, same type
const coords: number[] = [10, 20, 30]; // OK but not ideal for x,y

After this feature

Tuples provide precise type definitions:

// Basic tuple
let point: [number, number] = [10, 20];
// point[0] is number
// point[1] is number
// point[2] = 30; // Error - length is 2

// Mixed types
let user: [string, number, boolean];
user = ["Alice", 25, true]; // OK
user = [25, "Alice", true]; // Error - wrong types

// Tuple as function return
function getUser(): [string, number] {
  return ["Alice", 25];
}

const [name, age] = getUser();
// name is string, age is number

// Optional elements
type Point3D = [number, number, number?];
const p1: Point3D = [10, 20];     // OK
const p2: Point3D = [10, 20, 30]; // OK

// Rest elements
type StringNumberBooleans = [string, number, ...boolean[]];
const arr1: StringNumberBooleans = ["hello", 42];
const arr2: StringNumberBooleans = ["hello", 42, true, false];

// Named tuple elements (TS 4.0+)
type Range = [start: number, end: number];
type User = [name: string, age: number];

// Readonly tuples
const config: readonly [string, number] = ["version", 1];
// config[0] = "v2"; // Error

// Tuple types in destructuring
function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]];
}

const result = swap([1, "a"]); // [string, number]

Why this is better

• Type safety: Each element has specific type
• Fixed length: Enforces array size
• Destructuring: Works great with destructuring
• Function returns: Multiple typed return values
• Documentation: Types serve as documentation

Key notes / edge cases

• Length is part of the type
• Can have optional elements at end
• Rest elements for variable length
• Named elements improve readability
• Readonly tuples prevent mutation

// Array methods work but may break type
const tuple: [number, string] = [1, "a"];
tuple.push("b"); // Allowed but breaks tuple type
console.log(tuple); // [1, "a", "b"]

// Use readonly to prevent
const safe: readonly [number, string] = [1, "a"];
// safe.push("b"); // Error

// Tuple with labels (better docs)
type HTTP = [
  url: string,
  method: "GET" | "POST",
  status: number
];

// Variadic tuples (TS 4.0+)
type Concat<T extends unknown[], U extends unknown[]> = [...T, ...U];
type Result = Concat<[1, 2], [3, 4]>; // [1, 2, 3, 4]

Quick practice

1. Define a tuple for [id: number, name: string, active: boolean]

   Answer

   type User = [number, string, boolean];
   // or with labels
   type User = [id: number, name: string, active: boolean];

2. Create a function returning a tuple of [success: boolean, message: string]

   Answer

   function validate(input: string): [boolean, string] {
     if (input.length > 0) {
       return [true, "Valid"];
     }
     return [false, "Invalid"];
   }

3. What’s the difference between [number, string] and (number | string)[]?

   Answer

   `[number, string]` is a tuple: exactly 2 elements, first is number, second is string. `(number | string)[]` is an array: any length, each element can be number OR string.