Tuple types in TypeScript

What are Tuple Types?

A tuple is a fixed-length array where each element has a specific type at a specific position. Unlike regular arrays, tuples enforce both the number and types of elements.

Basic Syntax

typescript

// Array: any number of strings
const names: string[] = ["Alice", "Bob"];

// Tuple: exactly 2 elements with specific types
const person: [string, number] = ["Alice", 25];

person[0]; // string
person[1]; // number
person[2]; // ❌ Error: Tuple type has no element at index '2'

Named Tuple Elements

typescript

type Point = [x: number, y: number];
type Range = [start: number, end: number];
type RGB = [red: number, green: number, blue: number];

const point: Point = [10, 20];
const color: RGB = [255, 128, 0];

Optional Elements

typescript

type HttpResponse = [number, string, string?];
//                   status  body    headers (optional)

const ok: HttpResponse = [200, "Success"];
const full: HttpResponse = [200, "Success", "application/json"];

Rest Elements in Tuples

typescript

// First element is string, rest are numbers
type StringAndNumbers = [string, ...number[]];

const data: StringAndNumbers = ["scores", 90, 85, 92, 78];

// First and last are fixed, middle is flexible
type Padded = [first: string, ...middle: number[], last: boolean];

Readonly Tuples

typescript

type ReadonlyPoint = readonly [number, number];

const p: ReadonlyPoint = [10, 20];
p[0] = 30; // ❌ Error: Cannot assign to '0' because it is a read-only property

// as const creates readonly tuples
const coords = [10, 20] as const; // readonly [10, 20]

Destructuring Tuples

typescript

type UserTuple = [string, number, boolean];

const user: UserTuple = ["Alice", 25, true];
const [name, age, isActive] = user;
// name: string, age: number, isActive: boolean

// React useState returns a tuple
const [count, setCount] = useState(0);
// [number, Dispatch<SetStateAction<number>>]

Practical Use Cases

Function Return Types

typescript

function useState<T>(initial: T): [T, (value: T) => void] {
  let state = initial;
  const setState = (value: T) => { state = value; };
  return [state, setState];
}

function divide(a: number, b: number): [number, Error | null] {
  if (b === 0) return [0, new Error("Division by zero")];
  return [a / b, null];
}

const [result, error] = divide(10, 3);

Variadic Tuple Types

typescript

type Concat<A extends unknown[], B extends unknown[]> = [...A, ...B];

type Result = Concat<[1, 2], [3, 4]>; // [1, 2, 3, 4]

// Typed event emitter
type EventArgs = {
  click: [x: number, y: number];
  focus: [element: HTMLElement];
  submit: [data: FormData, event: Event];
};

Feature	Array	Tuple
Length	Variable	Fixed
Element types	Same type	Different types per position
Syntax	`string[]`	`[string, number]`
Use case	Lists	Structured data, pairs

Tuples are ideal for fixed-structure data like coordinates, key-value pairs, and function return values. React's useState is the most famous tuple example. Use named tuple elements for better readability.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems