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.