In TypeScript, a tuple is a special kind of array that allows you to:
- Store a fixed number of elements.
- Give each element a specific type and order.
Example
let person: [string, number] = ["Alice", 25];
This tuple means:
- The first item must be a string (like a
name). - The second item must be a number (like an
age).
Here,
["Bob", 30]is a valid tuple.[30, "Bob"]is not valid because order and types don't match.
Note: You can think of a tuple as a tiny, organized list where each item has its own job (or data type).
Why Use Tuples?
Tuples are useful when you want to group a few values that belong together but are of different types. They're perfect for things like:
- Coordinates:
[10, 20]where both values are numbers (x and y coordinates) - Product item:
["Apple", 1.99, true]— name (string), price (number), and availability (boolean)
#define How to Define and Use Tuples
Declaring a Tuple
You can define a tuple by listing the types of its elements in order. For example:
let point: [number, number] = [10, 20];
Here, point must always have exactly two numbers.
Accessing Tuple Values
Just like arrays, you can use index numbers to get the values:
console.log(point[0]); // 10
console.log(point[1]); // 20
Optional Elements in Tuples
Sometimes, you don't always need every value in a tuple. You can mark elements as optional using a ?.
let logEntry: [string, number?] = ["Error"];
In this case, the second item (number) is optional – so both of these are valid:
["Error"]
["Error", 404]
But TypeScript still checks the type if you include it:
["Error", "oops"]
Note: Optional tuple elements must be at the end. For example, [number?, string] is not allowed because it places a required element after an optional one.
More on TypeScript Tuples
Tuples have fixed types and order — but they can still be changed at runtime using array methods like push:
let user: [string, number] = ["Tom", 42];
// No error, but now it's no longer what we expected
user.push(100);
console.log(user); // ["Tom", 42, 100]
This is the limitation of TypeScript – it won't catch this at compile time.
To prevent this, you need to mark your tuple as readonly:
let safeUser: readonly [string, number] = ["Tom", 42];
//Error: Cannot modify a readonly tuple
safeUser.push(100);
Since tuples are compiled to JavaScript arrays, methods like push() are allowed unless the tuple is marked as readonly. TypeScript won't catch this unless enforced with readonly.
In JavaScript, there are no tuples. Arrays are flexible — they can hold any type of value, in any order:
let jsArray = ["Alice", 25]; // This is just a regular array in JS
In TypeScript, tuples let you define both the types and order of elements:
let tsTuple: [string, number] = ["Alice", 25];
If you try to change the order or use the wrong type, TypeScript will give you an error — that's the power of static typing.
Also Read: