ReviseAlgo Logo

TypeScript Fundamentals

Arrays & Tuples

Master array type annotations, union type arrays, generic Array syntax, fixed-length tuples, optional tuple elements, and readonly tuples in TypeScript.

Last Updated: July 29, 2026 • 10 min read

In TypeScript, Arrays store ordered collections of elements of a single type or union of types, while Tuples represent fixed-length arrays where each position has a specific, known type.

1. Array Type Annotations

There are two equivalent ways to annotate arrays in TypeScript:

1. Type Bracket Syntax: type[] (Recommended) 2. Generic Array Syntax: Array

Arrays with Union Types

2. Readonly Arrays

ReadonlyArray or readonly T[] prevents mutating methods (push, pop, splice) or index assignments:

3. Tuples: Fixed-Length & Position-Specific Types

A Tuple is a specialized array with a fixed number of elements, where each index has an explicit, pre-defined type.

4. Advanced Tuple Features

1. Named Tuple Elements (Documentation Clarity)

2. Optional Tuple Elements

3. Rest Element Tuples (Variadic Tuples)

4. Readonly Tuples

5. Interactive Code Playground

Test array and tuple operations below:

6. Common Pitfalls & Edge Cases

  • The push() Trap on Tuples: In standard TypeScript, calling .push() or .pop() on a non-readonly tuple is allowed at runtime, bypassing length restrictions! Use readonly [type1, type2] to strictly forbid mutations.
  • Array Destructuring Inferences: Destructuring standard arrays infers union types, whereas tuples infer explicit single types.

    • 7. Summary Comparison Table

    FeatureArrays (T[])Tuples ([T1, T2])
    LengthDynamic (Variable length)Fixed (Specific element count)
    Element TypesUniform or Union ((string \number)[])Position-specific ([string, number])
    Use CasesLists, collections, search resultsCoordinate pairs [x, y], React state hooks [state, setState]
    | Readonly Guard | readonly T[] | readonly [T1, T2] |