TypeScript Tuples

What is TypeScript Tuple

A tuple in TypeScript is a type that allows you to define an array with a fixed number of elements, each with specific types. Unlike regular arrays, tuples enforce a fixed structure and type order. This ensures that each position in the tuple contains the correct type of data. Tuples are useful when working with data that has a predictable structure, such as coordinates or key-value pairs.

Tuples are ideal for scenarios like representing a user's profile, where the first element is the name, the second is the age, and the third is the active status. For example, ["John", 30, true] indicates that John is 30 years old and currently active. This structured approach is common when working with database records or API responses that follow a fixed format.

Syntax of Tuple

Tuples are defined using square brackets with explicitly declared types for each element. For instance:

1
let user: [string, number, boolean] = ["Alice", 25, true];

Here, user is a tuple where the first element must be a string, the second a number, and the third a boolean. The syntax enforces the structure and type order.

Add Elements into Tuple

You can add elements to a tuple using the push() method. However, TypeScript does not restrict the types of additional elements added this way. For example:

1
2
let user: [string, number] = ["Alice", 25];
user.push("Admin");

This allows flexibility but may compromise the tuple’s original structure if not managed carefully.

Access Elements in Tuple

Elements in a tuple can be accessed using their index, similar to arrays. The indexing starts from 0. For example:

1
2
let user: [string, number] = ["Alice", 25];
console.log(user[0]); // Outputs: Alice

console.log(user[0]); will print "Alice" if the tuple is ["Alice", 25].
This is useful for retrieving specific data from a tuple, such as fetching a user’s name or age from a profile.

Print Tuple Elements

To print all elements in a tuple, you can use loops like for or forEach. For example:

1
user.forEach((element) => console.log(element));

user.forEach((element) => console.log(element));
This approach is helpful for displaying all elements of a tuple in scenarios like debugging or showing user details in a user interface.

Delete Element in Tuple

You can delete elements from a tuple using methods like pop() to remove the last element or splice() to remove elements at specific indexes. For example:

1
2
user.pop(); // Removes the last element
user.splice(1, 1); // Removes the element at index 1

user.pop(); removes the last element from the tuple ["Alice", 25].
Deleting elements can be useful when cleaning up unused or incorrect data in a tuple.

Readonly Tuple

A readonly tuple ensures that the tuple cannot be modified after creation. This makes it immutable and protects the data from accidental changes. For example:

1
2
let readonlyUser: readonly [string, number] = ["Alice", 25];
// readonlyUser.push(30); // Error: Cannot modify a readonly tuple

let user: readonly [string, number] = ["Alice", 25];
Trying to modify it, like user.push(30);, will result in an error. Readonly tuples are ideal for storing constant or fixed data like configuration settings.

Tuple vs. Array in TypeScript

• Fixed Structure: Tuples have a predefined structure with types assigned to each index, whereas arrays can contain any number of elements of a specific type.
• Dynamic Size: Arrays can grow or shrink dynamically, but tuples enforce a fixed size unless explicitly modified.
• Use Case: Use tuples for structured, predictable data (e.g., user profiles) and arrays for dynamic lists (e.g., product names).