Note: If you're new to TypeScript, check our Getting Started with TypeScript tutorial first.
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.
Here's a simple example of a tuple. You can read the rest of the tutorial to learn more.
Example
// Create a tuple with string and number data
let person: [string, number] = ["Alice", 25];
console.log(person);
// Output: [ 'Alice', 25 ]
Here, person is a tuple whose first item must be a string and the second item must be a number.
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
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: For example,
[10, 20]where both values are numbers (x and y coordinates). - Product Item: For example,
["Apple", 1.99, true]where the elements represent the product name (string), its price (number), and its availability (boolean).
Example 1: TypeScript Tuples
// Create a tuple with string and number data
let person: [string, number] = ["Alice", 25];
// Access the first element
console.log(person[0]);
// Access the second element
console.log(person[1]);
Output
Alice 25
In this example, person is a tuple of [string, number] type. Here,
person[0]- Gives the first element of the tuple, i.e., the string"Alice".person[1]- Gives the second element of the tuple, i.e., the number 25.
Note: You cannot swap the order of elements in a tuple. For example, in a tuple of [string, number] type, the first element cannot be of number type and the second element cannot be of string type.
Example 2: Change Tuple Elements
You can also use the array notation to change tuple elements. Alternatively, you can assign new values to the tuple. For example,
// Create a tuple with string and number data
let person: [string, number] = ["Alice", 25];
// Print the tuple
console.log(person);
// Change the first element
person[0] = "Veronica";
// Print the changed tuple
console.log(person);
// Assign new values to the entire tuple
person = ["Brad", 39];
// Print the changed tuple
console.log(person);
Output
[ 'Alice', 25 ] [ 'Veronica', 25 ] [ 'Brad', 39 ]
Optional Elements in Tuples
Sometimes, you don't always need every value in a tuple. You can mark elements as optional using the ? symbol.
let logEntry: [string, number?] = ["Error"];
console.log(logEntry);
// Output: [ 'Error' ]
In this case, the second item (number) is optional. So, it's not necessary to initialize that item.
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.
Of course, you can assign a value to the optional element if you want to:
let logEntry: [string, number?] = ["Error", 404];
console.log(logEntry);
// Output: [ 'Error', 404 ]
Needless to say, TypeScript still checks the type if you include the optional element:
// Invalid code: Type 'string' is not assignable to type 'number'
let logEntry: [string, number?] = ["Error", "oops"];
More on TypeScript Tuples
In JavaScript, there are no tuples. So, tuples are converted to arrays when the TypeScript code is compiled into JavaScript code.
JavaScript arrays are flexible — they can hold any type of value, in any order:
// This is just a regular array in JS
let jsArray = ["Alice", 25];
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.
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 issue 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.
TypeScript makes sure that each value in a tuple has the correct type and position, helping you catch mistakes early. For example,
let data: [string, boolean] = ["Test", true];
// Valid code
data[1] = false;
// Error: expected a boolean instead of string
data[1] = "oops";
This type-checking feature ensures your data stays predictable and reduces bugs caused by using the wrong types in the wrong places.
Also Read: