An array holds any number of values of one type, while a tuple has a fixed length and its own type at each position. So number[] is an array type, and [string, number] is a tuple type.
const scores: number[] = [90, 85, 77]; // any length, all numbers
scores.push(100); // fine
const entry: [string, number] = ["alice", 90];
const user = entry[0]; // string
const score = entry[1]; // number
// const bad: [string, number] = [90, "alice"]; // Error: wrong order
type Point = readonly [x: number, y: number]; // labeled and read-only
Tuples suit small, positional data, such as a function that returns two values. React's useState returns a value and a setter this way. For more than two or three fields, an object type with named properties is clearer.
Labels like x and y document what each position means. An optional element makes a tuple's length vary, and a rest element lets it grow.
A tuple is still an array at runtime, so push can add elements unless the tuple is readonly.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓