Using Tuples in TypeScript

In TypeScript, a tuple is a special type of array that allows storing a fixed number of elements with specific types in each position.

Tuples are useful when we know exactly how many and what types of elements we want to store in a grouping.

To declare a tuple, a syntax similar to arrays is used, but specifying the types of each element within brackets.

let tuple: [number, string, boolean];
tuple = [1, "TypeScript", true];

Tuple Initialization

Tuples must be initialized with the exact number and type of elements specified in their declaration.

// Correct
let correctTuple: [number, string] = [42, "Hello"];

// Incorrect
let incorrectTuple: [number, string] = [42];  // Error: Missing elements
let incorrectTupleTypes: [number, string] = [42, true];  // Error: Incorrect types

Accessing and Manipulating Tuples

let myTuple: [string, number, boolean] = ["TypeScript", 2024, true];

console.log(myTuple[0]);  // "TypeScript"
console.log(myTuple[1]);  // 2024
console.log(myTuple[2]);  // true

myTuple[1] = 2025;  // Correct
myTuple[2] = false;  // Correct

// Incorrect
// myTuple[1] = "2025";  // Error: Incorrect type

let [language, year, active] = myTuple;
console.log(language);  // "TypeScript"
console.log(year);      // 2024
console.log(active);    // true

Common Array Methods in Tuples

Tuples inherit several array methods, although their use may be limited due to the fixed nature of tuples.

myTuple.push("new element");  // Now it's [string, number, boolean, string]

let lastElement = myTuple.pop();  // "new element"

let myTuple: [string, number, boolean] = ["TypeScript", 2024, true];
let anotherTuple: [string, number] = ["Hello", 100];
let combined = myTuple.concat(anotherTuple);

console.log(combined);  // ["TypeScript", 2024, false, "Hello", 100]

Advanced Tuple Types

let optionalTuple: [number, string?, boolean?];
optionalTuple = [1];
optionalTuple = [1, "Optional"];
optionalTuple = [1, "Optional", true];

let restTuple: [number, ...string[]];
restTuple = [1];
restTuple = [1, "a", "b", "c"];

function processTuple(tuple: [string, number, boolean]): void {
    let [text, number, booleanValue] = tuple;
    console.log(`Text: ${text}, Number: ${number}, Boolean: ${booleanValue}`);
}

processTuple(["TypeScript", 2024, true]);

Practical Examples

let keyValuePair: [string, any][] = [
    ["name", "Luis"],
    ["age", 30],
    ["active", true]
];

keyValuePair.forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});
// name: Luis
// age: 30
// active: true

function calculate(a: number, b: number): [number, number, number, number] {
    return [a + b, a - b, a * b, a / b];
}

let [sum, difference, multiplication, division] = calculate(10, 2);
console.log(`Sum: ${sum}, Difference: ${difference}, Multiplication: ${multiplication}, Division: ${division}`);
// Sum: 12, Difference: 8, Multiplication: 20, Division: 5