Array and tuple types
📚 What are Array and Tuple Types in TypeScript? TypeScript lets you be precise about what's inside an array. A typed array (number[]) guarantees every element is a number. A tuple [string, number] is like an array but with a FIXED length and FIXED types at each position -- perfect for pairs or tri…
Appy Says…
Arrays in TypeScript know what type they hold — and Tuples go further: they know the type at each position. A [string, number] is a different type from [number, string]. This sounds pedantic until it saves you from a bug in production.
What are TypeScript Arrays and Tuples?
Typed arrays enforce that every element matches the declared type. Tuples are arrays with a fixed length and a known type at each position.
- •Array:
string[]orArray<string>— all elements are strings - •
number[]— all elements are numbers - •Array of objects:
User[] - •Tuple:
[string, number]— first element string, second number - •Example:
const entry: [string, number] = ['Alice', 42]; - •useState returns a tuple:
[value, setter]—[T, Dispatch<SetStateAction<T>>] - •Readonly arrays:
ReadonlyArray<string>— no push/pop/splice
Think of it like a typed chest in Minecraft
An array is a regular chest — all slots hold the same item type. A tuple is a specific crafting slot layout — slot 0 holds wood, slot 1 holds stone, slot 2 holds iron, in that exact order. Swap them and the recipe breaks.
How It Works
- •1.
const names: string[] = ['Alice', 'Bob'];— all strings - •2. Push wrong type:
names.push(42)→ compile error - •3. Tuple:
const point: [number, number] = [10, 20]; - •4. Tuple with labels:
const entry: [id: number, name: string] = [1, 'Alice']; - •5. Destructuring tuple:
const [id, name] = entry; - •6. Optional tuple element:
[string, number?]— second element optional
Real-World Examples
- •useState: returns
[T, React.Dispatch<...>]— a tuple - •CSV row:
[name: string, age: number, email: string] - •Coordinates:
[x: number, y: number, z?: number] - •Map entry:
[key: string, value: unknown]
Key Facts
- •Tuples are just arrays with additional compile-time length and type constraints
- •Spreading a tuple:
function add(...[a, b]: [number, number]): number { return a + b; } - •ReadonlyArray prevents mutation — use for data you shouldn't change
- •TypeScript infers tuple types from
as const:const pair = ['Alice', 42] as const→readonly ['Alice', 42]
Watch Out!
TypeScript lets you mutate tuple elements even if the type is correct — point[0] = 999 works. For truly immutable tuples use as const: const point = [10, 20] as const — this creates a readonly [10, 20] literal type.
Remember
string[] = typed array. [string, number] = tuple with fixed positions. Use tuples for multi-value returns (like useState) and fixed-shape data like coordinates or CSV rows.
What You Learned
- •Typed arrays:
string[]— all elements must match; compiler catches wrong types on push/access - •Tuples:
[string, number]— fixed length, type per position; useState returns a tuple - •Unlocks: safe array manipulation, multi-value function returns, coordinates, CSV data
Key Facts
- →Tuples are just arrays with additional compile-time length and type constraints
- →Spreading a tuple:
function add(...[a, b]: [number, number]): number { return a + b; } - →ReadonlyArray prevents mutation — use for data you shouldn't change
- →TypeScript infers tuple types from
as const:const pair = ['Alice', 42] as const→readonly ['Alice', 42]
Real-World Examples
Remember
string[] = typed array. [string, number] = tuple with fixed positions. Use tuples for multi-value returns (like useState) and fixed-shape data like coordinates or CSV rows.
Quick Quiz
number[] means?