TypeScript Tuples

A tuple is a special kind of array with a fixed number of elements where each position holds a specific type. Unlike a regular array where all elements share the same type, a tuple specifies exactly what type belongs at each index. Tuples represent structured data with a known, fixed format.

Array vs Tuple

  Regular Array — same type, any length:
  +-------+-------+-------+-------+
  |  85   |  92   |  78   |  95   |   number[] — any count of numbers
  +-------+-------+-------+-------+

  Tuple — fixed types at fixed positions:
  +----------+-------+------------+
  | "Priya"  |  22   |   "Delhi"  |   [string, number, string]
  +----------+-------+------------+
  Position 0  Pos 1     Position 2
   (name)     (age)      (city)

Declaring a Tuple

// Syntax: [type1, type2, type3, ...]
let studentRecord: [string, number, string];

studentRecord = ["Priya", 22, "Delhi"];   // Correct
studentRecord = [22, "Priya", "Delhi"];   // Error: position 0 must be string, position 1 must be number
studentRecord = ["Priya", 22];            // Error: tuple requires exactly 3 elements

Accessing Tuple Elements

Tuple elements are accessed by index, just like arrays. TypeScript knows the exact type at each position.

let employee: [string, number, boolean] = ["Suresh", 45000, true];

let name: string = employee[0];    // "Suresh"
let salary: number = employee[1];  // 45000
let active: boolean = employee[2]; // true

console.log(name + " earns " + salary + ". Active: " + active);
// Output: Suresh earns 45000. Active: true

Tuple Destructuring

Destructuring extracts tuple values into named variables in one line. This makes the code much more readable than using index numbers.

let product: [string, number, string] = ["Laptop", 55000, "Electronics"];

let [productName, productPrice, productCategory] = product;

console.log(productName);     // Laptop
console.log(productPrice);    // 55000
console.log(productCategory); // Electronics

Optional Tuple Elements

A question mark ? marks a tuple element as optional. Optional elements must appear at the end of the tuple definition.

// Third element (email) is optional
let userInfo: [string, number, string?];

userInfo = ["Kavya", 28];                    // Allowed — email skipped
userInfo = ["Kavya", 28, "kavya@mail.com"];  // Allowed — email provided

console.log(userInfo[0]); // Kavya
console.log(userInfo[2]); // kavya@mail.com OR undefined

Rest Elements in Tuples

A rest element at the end of a tuple captures any number of additional values of a specific type.

// First element is the subject name, rest are marks
let subjectMarks: [string, ...number[]];

subjectMarks = ["Mathematics", 88, 92, 79];
subjectMarks = ["Science", 75, 80];
subjectMarks = ["English", 95, 88, 91, 87];

let [subject, ...allMarks] = subjectMarks;
console.log(subject);   // English
console.log(allMarks);  // [95, 88, 91, 87]

Readonly Tuples

Adding readonly prevents changes to tuple values after creation. This is ideal for fixed data like GPS coordinates or RGB color values.

const location: readonly [number, number] = [28.6139, 77.2090]; // Delhi coordinates

console.log(location[0]); // 28.6139
console.log(location[1]); // 77.2090

location[0] = 19.0760;    // Error: Cannot assign to '0' because it is a read-only property.

Tuple vs Array — When to Use Which

Named Tuples (Labels)

TypeScript supports labels on tuple elements for better readability. Labels are purely for documentation — they do not change how the tuple works.

// Without labels — hard to understand at a glance
let point: [number, number, number] = [10, 20, 30];

// With labels — meaning is clear
let coordinate: [x: number, y: number, z: number] = [10, 20, 30];

console.log(coordinate[0]); // 10 (x)
console.log(coordinate[1]); // 20 (y)
console.log(coordinate[2]); // 30 (z)

Practical Example — CSV-Like Records

// Student attendance record: [name, present, absent, percentage]
type AttendanceRecord = [string, number, number, number];

let records: AttendanceRecord[] = [
    ["Aman",  22, 3, 88],
    ["Rekha", 24, 1, 96],
    ["Deepak", 18, 7, 72]
];

for (let [name, present, absent, percentage] of records) {
    let status = percentage >= 75 ? "Eligible" : "Shortage";
    console.log(name + " | Present: " + present + " | " + status);
}

// Output:
// Aman   | Present: 22 | Eligible
// Rekha  | Present: 24 | Eligible
// Deepak | Present: 18 | Shortage