TypeScript Tuples

By: Rajesh P.S.

In TypeScript, a tuple is a data structure that allows you to store a fixed-size, ordered collection of elements, each of which may have a different data type. Tuples provide a way to represent and manipulate heterogeneous arrays with a known length.

Tuple Declaration and Initialization

Tuples are declared using square brackets [] with type annotations for each element:

let person: [string, number] = ['Jack Sparrow', 30];

Running the TypeScript compiler (tsc) will generate the following JavaScript code:

let person = ['Jack Sparrow', 30];

In this example, the tuple person has a string as its first element (representing the name) and a number as its second element (representing the age).

Accessing Tuple Elements

Continue Reading...

You can access elements in a tuple using zero-based indexing:

let name: string = person[0]; let age: number = person[1];

TypeScript provides the correct types for each element based on the tuple's type annotation.

Tuple Type Inference

TypeScript can infer tuple types based on the values assigned:

let employee = ['Emmy', 25, true]; // TypeScript infers the tuple type as [string, number, boolean]

Tuple with Optional Elements

You can use the union type with undefined to represent optional elements in a tuple:

let contact: [string, number?]; // The second element is optional contact = ['Emmy']; // Valid contact = ['Bob', 30]; // Valid

Tuples and Generics

TypeScript allows creating generic tuples with placeholders for element types, offering flexibility and reusability:

function createTuple<T1, T2>(element1: T1, element2: T2): [T1, T2] { return [element1, element2]; } const stringNumberTuple = createTuple("Hello", 10); // Tuple with string and number const booleanObjectTuple = createTuple(true, { name: "John" }); // Tuple with boolean and object

Running the TypeScript compiler (tsc) will generate the following JavaScript code:

function createTuple(element1, element2) { return [element1, element2]; } const stringNumberTuple = createTuple("Hello", 10); // Tuple with string and number const booleanObjectTuple = createTuple(true, { name: "John" }); // Tuple with boolean and object

Destructuring Tuples

You can use destructuring to extract values from a tuple:

let [personName, personAge] = person; console.log(personName); // 'Jack Sparrow' console.log(personAge); // 30

Tuple Type Aliases

Type aliases can be used for more complex tuple types:

type Point = [number, number]; let coordinates: Point = [10, 20];

Tuple Methods and Properties

Tuples share many methods and properties with arrays since they are a specialized form of arrays with a fixed length. Let's explore the relevant methods and properties associated with tuples:

Length Property

The length property returns the number of elements in a tuple.

let person: [string, number] = ['John Doe', 30]; console.log(person.length); // Output: 2

Push Method

The push method is used to add elements to the end of an array or a tuple.

let person: [string, number] = ['John Doe', 30]; person.push('Engineer'); // Valid, adds an element to the end

Note: While push works for tuples, it's essential to maintain the fixed length of the tuple.

Pop Method

The pop method removes the last element from an array or a tuple.

let person: [string, number] = ['John Doe', 30]; let jobTitle = person.pop(); // jobTitle = 'Engineer', person = ['John Doe', 30]

Note: The pop method is allowed in this example because we previously used push to add an element.

Concat Method

The concat method is used to concatenate two or more arrays or tuples.

let person: [string, number] = ['John Doe', 30]; let additionalInfo: [boolean] = [true]; let extendedInfo = person.concat(additionalInfo); // Result: ['John Doe', 30, true]

Note: The concat method returns a new array or tuple; it doesn't modify the existing one.

Concatenation using Spread Operator

Alternatively, you can use the spread operator (...) for concatenation.

let person: [string, number] = ['John Doe', 30]; let additionalInfo: [boolean] = [true]; let extendedInfo = [...person, ...additionalInfo]; // Result: ['John Doe', 30, true]

Slice Method

The slice method extracts a section of an array or a tuple and returns a new one.

let person: [string, number, boolean] = ['John Doe', 30, true]; let partialInfo = person.slice(1, 3); // Result: [30, true]

Note: The slice method doesn't modify the original tuple; it creates a new one.

Tuple vs. Array

Tuples are fixed in length, whereas arrays can dynamically grow or shrink. Tuples are often used when the number of elements and their types are known in advance.

let tuple: [string, number] = ['John Doe', 30]; let array: Array<string number> = ['John Doe', 30];

Advantages of using Tuples

Type Safety: Provides type safety for each element, preventing errors and improving code clarity.
Enhanced Readability: Makes code more readable and understandable by explicitly defining the structure and order of elements.
Improved Refactoring: Facilitates refactoring and code changes due to explicit type information.
Function Argument Validation: Enables precise validation of function arguments with specific types and order.

Conclusion

TypeScript tuples provide a structured way to work with collections of heterogeneous data with a fixed length. They offer type safety and can be particularly useful when dealing with functions that return multiple values or when working with APIs that expect data in a specific order.

Next > TypeScript Union Types

Related Topics

More Related Topics.....