Arrays and Tuples in TypeScript

Understand how to work with arrays and tuples in TypeScript. We'll cover declaring, initializing, and manipulating these data structures.

⬅ Previous Next ➡

TypeScript Tuples for Beginners

What are Tuples?

In TypeScript, a tuple is a typed array with a pre-defined length and types for each index. Unlike regular arrays where all elements usually share the same type, tuples allow you to store elements of different types in a specific order. Think of them as a way to create a fixed-size array where you know exactly what kind of data will be at each position.

Accessing Tuple Elements

You can access tuple elements using their index, just like you would with a regular array. Remember that array indices start at 0.

Example: Accessing Tuple Elements

 // Define a tuple with a string, a number, and a boolean
let myTuple: [string, number, boolean] = ["hello", 42, true];

// Access elements by index
let myString: string = myTuple[0]; // myString will be "hello"
let myNumber: number = myTuple[1]; // myNumber will be 42
let myBoolean: boolean = myTuple[2]; // myBoolean will be true

console.log(myString);
console.log(myNumber);
console.log(myBoolean);

Trying to access an index that is out of bounds of the tuple (e.g., myTuple[3] in the example above) will result in a compile-time error in TypeScript. This is one of the key benefits of using tuples – TypeScript can help you catch errors early.

Tuple Type Inference

TypeScript is smart enough to infer the tuple type based on the values you assign to it. This means you don't always have to explicitly define the tuple type.

Example: Tuple Type Inference

 // TypeScript infers the type as [string, number]
let inferredTuple = ["world", 123];

// inferredTuple[0] is automatically typed as string
let inferredString = inferredTuple[0];

// inferredTuple[1] is automatically typed as number
let inferredNumber = inferredTuple[1];

console.log(inferredString);
console.log(inferredNumber);

//This will cause an error.
// inferredTuple[0] = 123; // Type 'number' is not assignable to type 'string'.

In this example, TypeScript automatically infers that inferredTuple is of type [string, number] because that's the order and types of the values you're assigning. TypeScript uses this information for type checking, ensuring that you're using the tuple elements correctly. Trying to assign a value of the wrong type will result in a compile-time error.

Tuples vs. Arrays

The primary difference between tuples and arrays lies in their type definition and length. Arrays typically hold elements of a single type and can be of variable length. Tuples, on the other hand, have a fixed length and define the type of each element at a specific index. This strict typing and fixed size provide greater type safety and predictability when working with structured data.

Common Uses for Tuples

Tuples are particularly useful when you need to represent a fixed collection of values with different types, such as:

Coordinates (e.g., [number, number] for x and y)
Database records (e.g., [string, number, boolean] for name, age, active status)
Returning multiple values from a function (e.g., a function that returns both a result and an error code)

⬅ Previous Next ➡