Tuples in TypeScript are a special type of array that allow you to define the number and types of elements that an array can contain. Unlike regular arrays, where all elements must be of the same type, tuples can have a fixed number of elements, each with a different type.
This allows for more control and type safety when working with structured data.
In this tutorial, we will explore the basics of tuples, including how to define them, access their elements, use optional elements, and how to leverage tuple features in TypeScript.
1. Basic Tuple Syntax
In TypeScript, you can define a tuple using square brackets [ ], specifying the types of each element in order.
Example 1: Defining a Simple Tuple
let person: [string, number]; person = ['Alice', 30]; // Valid tuple console.log(person); // Output: ['Alice', 30]
Explanation:
person is a tuple that can only contain a string as the first element and a number as the second element.
The order of elements is important. If the order or types are incorrect, TypeScript will raise an error.
2. Accessing Tuple Elements
You can access tuple elements using index notation, just like arrays.
Example 2: Accessing Tuple Elements
let car: [string, number] = ['Toyota', 2021]; console.log(car[0]); // Output: 'Toyota' console.log(car[1]); // Output: 2021
Explanation:
Elements in the tuple car can be accessed by their index (car[0], car[1]), similar to how array elements are accessed.
3. Modifying Tuple Elements
You can modify the elements of a tuple by assigning new values, as long as the new values match the types defined in the tuple.
Example 3: Modifying Tuple Elements
let employee: [string, number] = ['Bob', 40]; // Modifying the tuple elements employee[0] = 'Robert'; // Changing the string element employee[1] = 41; // Changing the number element console.log(employee); // Output: ['Robert', 41]
Explanation:
The tuple employee allows us to update the string and number values as long as we maintain the correct type for each position.
4. Optional Tuple Elements
TypeScript allows you to define optional elements in a tuple using the ? syntax. Optional elements can be undefined or omitted when defining the tuple.
Example 4: Defining Optional Tuple Elements
let address: [string, number, string?]; address = ['Main St', 123]; // Valid: Optional element is omitted address = ['Main St', 123, 'Apt 4B']; // Valid: Optional element is provided console.log(address); // Output: ['Main St', 123, 'Apt 4B']
Explanation:
The string? denotes that the third element of the tuple is optional.
You can either provide this optional element or omit it, and the tuple will still be valid.
5. Rest Elements in Tuples
You can define rest elements in tuples, which allow the tuple to accept a variable number of elements at the end. Rest elements are defined using … (spread syntax).
Example 5: Using Rest Elements in Tuples
let team: [string, ...string[]]; team = ['Team Leader', 'Developer', 'Designer', 'Tester']; console.log(team); // Output: ['Team Leader', 'Developer', 'Designer', 'Tester']
Explanation:
The …string[] rest element allows the tuple team to accept any number of additional string values after the first element.
6. Destructuring Tuples
You can use destructuring to extract values from a tuple into individual variables.
Example 6: Destructuring Tuples
let book: [string, string, number] = ['The Catcher in the Rye', 'J.D. Salinger', 1951]; // Destructure the tuple into individual variables let [title, author, year] = book; console.log(title); // Output: 'The Catcher in the Rye' console.log(author); // Output: 'J.D. Salinger' console.log(year); // Output: 1951
Explanation:
Destructuring allows you to unpack the elements of the tuple book into separate variables (title, author, and year).
7. Tuples with Mixed Types
Tuples are particularly useful when you need to store different types of values in a specific order. You can mix various types like string, number, boolean, and even other tuples or arrays.
Example 7: Tuples with Mixed Types
let userProfile: [string, number, boolean] = ['Alice', 30, true]; console.log(userProfile[0]); // Output: 'Alice' console.log(userProfile[1]); // Output: 30 console.log(userProfile[2]); // Output: true
Explanation:
The tuple userProfile holds a string, a number, and a boolean. The types and order of the elements must match the tuple definition.
8. Tuples in Functions
You can use tuples as types for function parameters and return values. This is useful when a function needs to return multiple values of different types.
Example 8: Using Tuples in Functions
function getPersonInfo(): [string, number] {
return ['Alice', 30];
}
let personInfo = getPersonInfo();
console.log(personInfo); // Output: ['Alice', 30]
Explanation:
The function getPersonInfo() returns a tuple with a string and a number.
This allows the function to return multiple values of different types in a single call.
9. Tuples with Labels (Named Tuples)
Starting from TypeScript 4.0, you can label elements in a tuple to make their meaning clearer. This improves readability and helps with documentation.
Example 9: Labeled Tuples
let employee: [name: string, age: number, isManager: boolean]; employee = ['Bob', 40, true]; console.log(employee); // Output: ['Bob', 40, true]
Explanation:
Labeled tuples provide names to each element in the tuple, making it clear what each element represents. This is helpful for readability but does not affect the structure or type of the tuple.
10. Readonly Tuples
Tuples can be declared as readonly, which makes them immutable. Once a tuple is defined as readonly, its elements cannot be modified.
Example 10: Defining Readonly Tuples
let position: readonly [number, number] = [10, 20]; // This will cause an error because the tuple is readonly // position[0] = 15; // Error: Cannot assign to '0' because it is a read-only property. console.log(position); // Output: [10, 20]
Explanation:
readonly tuples prevent modification of the elements, making the tuple immutable.
Conclusion
Tuples in TypeScript provide a way to define arrays with a fixed number of elements where each element can have a different type. This adds flexibility and safety when dealing with structured data. Tuples are particularly useful when you need to model related values of different types, such as coordinates, user profiles, or responses from functions.
Key Features of TypeScript Tuples:
Fixed-length arrays: Each element in a tuple has a predefined type and position.
Optional elements: Tuples can have optional elements that may or may not be present.
Rest elements: Tuples can accept a variable number of elements using rest syntax (…).
Destructuring: Easily extract values from tuples using destructuring.
Mixed types: Tuples can hold different types in a specific order.
Labeled tuples: Elements in a tuple can be labeled for better readability.
Readonly tuples: Tuples can be made immutable by using the readonly modifier.
By mastering TypeScript tuples, you can write more structured, readable, and type-safe code when dealing with collections of related data.