Introduction
In this chapter, we will explore tuples in TypeScript. Tuples are a special type of array that can hold elements of different types. Understanding how to work with tuples is essential for managing and manipulating collections of data with mixed types in your TypeScript programs.
Table of Contents
- Definition
- Tuple Syntax
- Creating and Accessing Tuple Elements
- Tuple Methods
- Destructuring Tuples
- Type Inference with Tuples
- Complete Example with Output
- Conclusion
Definition
A tuple in TypeScript is a fixed-length array that can hold elements of different types. Tuples are useful for representing a collection of related but heterogeneous values, such as a pair of a string and a number.
Tuple Syntax
Syntax
let tupleName: [type1, type2, ...] = [value1, value2, ...]; Example
let person: [string, number] = ["Ramesh", 25]; console.log(person); Output
[ 'Ramesh', 25 ] Creating and Accessing Tuple Elements
You can create tuples with initial values and access elements using their index.
Example
let person: [string, number] = ["Ramesh", 25]; // Accessing elements console.log(person[0]); // Output: Ramesh console.log(person[1]); // Output: 25 // Modifying elements person[1] = 26; console.log(person); // Output: [ 'Ramesh', 26 ] Output
Ramesh 25 [ 'Ramesh', 26 ] Tuple Methods
Tuples support common array methods such as push, pop, shift, unshift, concat, slice, and splice. However, these methods must maintain the integrity of the tuple’s types.
Example
let person: [string, number] = ["Ramesh", 25]; // push person.push("Mumbai"); console.log(person); // Output: [ 'Ramesh', 25, 'Mumbai' ] // pop person.pop(); console.log(person); // Output: [ 'Ramesh', 25 ] // Other methods let extendedPerson: [string, number, string] = ["Ramesh", 25, "Developer"]; console.log(extendedPerson); // Output: [ 'Ramesh', 25, 'Developer' ] Output
[ 'Ramesh', 25, 'Mumbai' ] [ 'Ramesh', 25 ] [ 'Ramesh', 25, 'Developer' ] Destructuring Tuples
You can destructure tuples to extract individual elements into variables.
Example
let person: [string, number] = ["Ramesh", 25]; // Destructuring let [name, age] = person; console.log(name); // Output: Ramesh console.log(age); // Output: 25 Output
Ramesh 25 Type Inference with Tuples
TypeScript can infer the types of tuple elements based on their initial values.
Example
let person = ["Ramesh", 25] as [string, number]; // TypeScript infers the type of 'person' as [string, number] console.log(person[0]); // Output: Ramesh console.log(person[1]); // Output: 25 Output
Ramesh 25 Complete Example with Output
In this section, we will combine all the examples into a single TypeScript file, compile it to JavaScript, and run it to see the output.
TypeScript Code
You can test the following code in the TypeScript Playground:
// Creating and Accessing Tuple Elements let person: [string, number] = ["Ramesh", 25]; // Accessing elements console.log(person[0]); // Output: Ramesh console.log(person[1]); // Output: 25 // Modifying elements person[1] = 26; console.log(person); // Output: [ 'Ramesh', 26 ] // Tuple Methods person.push("Mumbai"); console.log(person); // Output: [ 'Ramesh', 26, 'Mumbai' ] person.pop(); console.log(person); // Output: [ 'Ramesh', 26 ] let extendedPerson: [string, number, string] = ["Ramesh", 25, "Developer"]; console.log(extendedPerson); // Output: [ 'Ramesh', 25, 'Developer' ] // Destructuring Tuples let [name, age] = person; console.log(name); // Output: Ramesh console.log(age); // Output: 26 // Type Inference with Tuples let inferredPerson = ["Ramesh", 25] as [string, number]; // TypeScript infers the type of 'inferredPerson' as [string, number] console.log(inferredPerson[0]); // Output: Ramesh console.log(inferredPerson[1]); // Output: 25 Conclusion
In this chapter, we covered tuples in TypeScript, including how to create and access tuple elements, use common tuple methods, destructure tuples, and understand type inference with tuples. We provided a complete example with its output to illustrate how tuples work in TypeScript.