TypeScript Tuples
Fixed-length arrays with specific types
🎯 What are Tuples?
Tuples are special arrays with fixed length and specific types for each position. Unlike regular arrays, each element can have a different type, and the order matters for type checking.
// Tuple: [string, number, boolean]
let user: [string, number, boolean];
user = ["Alice", 25, true]; // Correct order
Output:
user: ["Alice", 25, true]
Tuples vs Arrays
Regular Array
Same type, any length
let arr: number[] = [1, 2, 3];
arr.push(4); // OKTuple
Fixed types and length
let tuple: [string, number];
tuple = ["Alice", 25]; // OK🔹 Creating Tuples
Define tuples with specific types in order:
// Basic tuple
let person: [string, number];
person = ["Alice", 25]; // ✅ Correct
// ❌ Wrong order
// person = [25, "Alice"]; // Error
// ❌ Wrong type
// person = ["Alice", "25"]; // Error
// Tuple with multiple types
let product: [string, number, boolean];
product = ["Laptop", 999.99, true];
console.log(product[0]); // "Laptop"
console.log(product[1]); // 999.99
console.log(product[2]); // true
Output:
Laptop
999.99
true
🔹 Accessing Tuple Elements
Access elements by index with type safety:
// Define a tuple
let employee: [string, number, string] = ["John", 12345, "Manager"];
// Access elements
let name = employee[0]; // string
let id = employee[1]; // number
let role = employee[2]; // string
console.log(`${name} (ID: ${id}) - ${role}`);
// TypeScript knows the types
let upperName = employee[0].toUpperCase(); // OK - string method
let doubled = employee[1] * 2; // OK - number operation
console.log(upperName); // "JOHN"
console.log(doubled); // 24690
Output:
John (ID: 12345) - Manager
JOHN
24690
🔹 Readonly Tuples
Make tuples immutable with readonly:
// Readonly tuple
let point: readonly [number, number] = [10, 20];
// ✅ Reading is OK
console.log(point[0]); // 10
console.log(point[1]); // 20
// ❌ Cannot modify
// point[0] = 30; // Error: Cannot assign to '0' because it is a read-only property
// point.push(30); // Error: Property 'push' does not exist
// Use case: Coordinates that shouldn't change
let origin: readonly [number, number] = [0, 0];
Output:
10
20
🔹 Optional Tuple Elements
Make tuple elements optional with ?:
// Optional elements (must be at the end)
let user: [string, number, boolean?];
user = ["Alice", 25, true]; // ✅ OK
user = ["Bob", 30]; // ✅ OK - boolean is optional
// Multiple optional elements
let data: [string, number?, boolean?];
data = ["test"]; // ✅ OK
data = ["test", 42]; // ✅ OK
data = ["test", 42, true]; // ✅ OK
console.log(data);
Output:
["test", 42, true]
🔹 Rest Elements in Tuples
Use rest syntax for variable-length tuples:
// First element is string, rest are numbers
let scores: [string, ...number[]];
scores = ["Math", 95, 87, 92]; // ✅ OK
scores = ["Science", 88]; // ✅ OK
scores = ["English", 90, 85, 92, 88]; // ✅ OK
console.log(scores[0]); // "Math"
console.log(scores[1]); // 95
// Another example: name and multiple phone numbers
let contact: [string, ...string[]];
contact = ["Alice", "555-1234", "555-5678"];
console.log(contact);
Output:
Math
95
["Alice", "555-1234", "555-5678"]
🔹 Destructuring Tuples
Extract tuple values into variables:
// Tuple destructuring
let person: [string, number, string] = ["Alice", 25, "Engineer"];
// Extract values
let [name, age, job] = person;
console.log(name); // "Alice"
console.log(age); // 25
console.log(job); // "Engineer"
// Skip elements
let [firstName, , occupation] = person;
console.log(firstName); // "Alice"
console.log(occupation); // "Engineer"
// Function returning tuple
function getUser(): [string, number] {
return ["Bob", 30];
}
let [userName, userAge] = getUser();
console.log(`${userName} is ${userAge} years old`);
Output:
Alice
25
Engineer
Alice
Engineer
Bob is 30 years old
🔹 Practical Examples
Real-world tuple usage:
Example 1: RGB Color
// RGB color as tuple
type RGB = [number, number, number];
let red: RGB = [255, 0, 0];
let green: RGB = [0, 255, 0];
let blue: RGB = [0, 0, 255];
function displayColor(color: RGB): string {
return `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
}
console.log(displayColor(red)); // rgb(255, 0, 0)
console.log(displayColor(green)); // rgb(0, 255, 0)
Example 2: API Response
// API response: [status, data, error]
type APIResponse = [number, string, string?];
function fetchData(): APIResponse {
// Simulate successful response
return [200, "Success", undefined];
}
let [status, message, error] = fetchData();
console.log(`Status: ${status}, Message: ${message}`);
Output:
rgb(255, 0, 0)
rgb(0, 255, 0)
Status: 200, Message: Success
🔹 When to Use Tuples
✅ Use Tuples When:
- You need a fixed number of elements
- Each position has a specific meaning
- Elements have different types
- Order matters (coordinates, RGB values)
- Returning multiple values from functions
❌ Use Arrays When:
- All elements have the same type
- Length can vary
- Order doesn't define meaning
- You need array methods like map, filter