> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TypeScript Tuple Type

A tuple in TypeScript is a specialized array type that enforces a fixed length and a specific type sequence. It allows you to express an array where the type of each element is known at a specific positional index, enabling strict type checking for heterogeneous collections.

## Basic Syntax and Assignment

A tuple is defined by wrapping a comma-separated list of types in square brackets. The assigned array must exactly match the defined length and the type at each corresponding index.

```typescript theme={"dark"}
let strictTuple: [string, number, boolean];

strictTuple = ["hello", 42, true]; // Valid

// Error: Type 'number' is not assignable to type 'string' at index 0.
strictTuple = [42, "hello", true]; 

// Error: Source has 2 element(s) but target requires 3.
strictTuple = ["hello", 42]; 
```

## Positional Type Inference

When accessing elements via bracket notation or destructuring, the TypeScript compiler infers the exact type based on the index. Accessing an index outside the defined length results in a compile-time error.

```typescript theme={"dark"}
let data: [string, number] = ["TypeScript", 2023];

const text = data[0]; // Inferred as 'string'
const year = data[1]; // Inferred as 'number'

// Error: Tuple type '[string, number]' of length '2' has no element at index '2'.
const outOfBounds = data[2]; 
```

## Optional Elements

Tuple elements can be marked as optional using the `?` modifier. Optional elements must always appear at the end of the tuple declaration. This makes the `length` property of the tuple a union type.

```typescript theme={"dark"}
let optionalTuple: [string, number, boolean?];

optionalTuple = ["test", 1];       // Valid, length is 2
optionalTuple = ["test", 1, true]; // Valid, length is 3

type OptLength = typeof optionalTuple.length; // Type is 2 | 3
```

## Variadic Tuples (Rest Elements)

Tuples can incorporate rest elements (`...`) to represent an open-ended sequence of a specific type while maintaining strict positional types for the other elements. The rest element can be positioned at the beginning, middle, or end of the tuple.

```typescript theme={"dark"}
// Rest element at the end
let stringAndNumbers: [string, ...number[]];
stringAndNumbers = ["start", 1, 2, 3, 4];

// Rest element in the middle
let boundedTuple: [boolean, ...string[], number];
boundedTuple = [true, "a", "b", "c", 99];
```

## Labeled (Named) Tuple Elements

To improve code readability and tooling support (like IDE autocompletion), tuple elements can be labeled. These labels are purely metadata and do not affect the runtime behavior or the underlying type structure.

```typescript theme={"dark"}
let userRecord: [name: string, age: number, isActive: boolean];
userRecord = ["Alice", 30, true];
```

## Readonly Tuples

By default, tuple elements are mutable. You can enforce immutability using the `readonly` modifier or the `Readonly<T>` utility type. This removes mutating methods like `push`, `pop`, and `splice` from the type definition.

```typescript theme={"dark"}
let immutableTuple: readonly [string, number] = ["fixed", 100];

// Error: Cannot assign to '0' because it is a read-only property.
immutableTuple[0] = "mutated"; 

// Error: Property 'push' does not exist on type 'readonly [string, number]'.
immutableTuple.push(200); 
```

## The Mutation Caveat

In standard (non-readonly) tuples, TypeScript strictly enforces length and types during direct assignment. However, array mutation methods like `push()` and `pop()` are permitted by the compiler, provided the pushed value matches the union type of all tuple elements. Despite this, TypeScript will still prevent access to out-of-bounds indices.

```typescript theme={"dark"}
let mutableTuple: [string, number] = ["a", 1];

mutableTuple.push(2); // Valid at compile-time
mutableTuple.push("b"); // Valid at compile-time

// Error: Argument of type 'boolean' is not assignable to parameter of type 'string | number'.
mutableTuple.push(true); 

// Error: Tuple type '[string, number]' of length '2' has no element at index '2'.
const hiddenElement = mutableTuple[2]; 
```

<div
  style={{ 
display: "flex", 
justifyContent: "space-between", 
alignItems: "center", 
maxWidth: "754px", 
padding: "1rem 0",
marginBottom: "24px"
}}
>
  <span style={{ fontWeight: "bold", fontSize: "1.25rem", color: "var(--tw-prose-headings)", fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif" }}>Tired of Poor TypeScript Skills? Fix That With Deep Grasping!</span>

  <a
    href="https://syntblaze.com"
    target="_blank"
    style={{ 
  marginLeft: "24px",
  textDecoration: "none", 
  backgroundColor: "#007AFF",
  color: "#ffffff", 
  padding: "6px 16px", 
  borderRadius: "16px",
  fontSize: "0.9rem",
  fontWeight: "600",
  textAlign: "center",
  transition: "background-color 0.2s ease"
}}
  >
    Learn More
  </a>
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/skill-tracking.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=b9b0305c93bb501c9e767b5c76c88835" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/skill-tracking.png" />

  <img src="https://mintcdn.com/syntblazellc/23tyuOzaWS88qFlc/images/nuggets.png?fit=max&auto=format&n=23tyuOzaWS88qFlc&q=85&s=c86c80197299762989e9b882419b2109" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/nuggets.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/bite-sized-exercises.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=a65f9a38c37ff28ab73ed783c53c60e3" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/bite-sized-exercises.png" />
</div>

<div style={{ display: "flex", gap: "12px", flexWrap: "wrap", marginTop: "12px" }}>
  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/mastery-chain.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=748a1763454713e679260fbb95f154a2" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/mastery-chain.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-previews.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=242f61448ff5dd6deaaab2dccc13b507" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-previews.png" />

  <img src="https://mintcdn.com/syntblazellc/-L0ums_2lctDSZ1l/images/element-explanations.png?fit=max&auto=format&n=-L0ums_2lctDSZ1l&q=85&s=cf0fc1c31f9cd0fc26716781be05fbc9" style={{ width: "30%", minWidth: 60 }} width="621" height="1344" data-path="images/element-explanations.png" />
</div>
