What is a Tuple in TypeScript?
Learn what tuples are in TypeScript, how they differ from arrays, optional and rest elements, and why useState returns a tuple, with clear code examples.
Expected Interview Answer
A tuple is an array type with a fixed length where each position has a specific, individually declared type, such as `[string, number]`, unlike a regular array where every element must share one common type.
You declare a tuple as `let pair: [string, number] = ['age', 30]`, and TypeScript enforces both the length and the type at each index — swapping the order or adding an extra element is a compile error. Tuples support optional elements with `?`, rest elements for variable-length tails like `[string, ...number[]]`, and named labels (`[name: string, age: number]`) purely for readability in tooling. They are commonly used for function return values like `useState()`'s `[value, setter]` pair, where positional meaning matters more than named properties. At runtime a tuple is just a plain JavaScript array — the fixed-length, per-position typing is purely a compile-time contract enforced by TypeScript.
- Enforces exact length and per-position types, catching order mistakes
- Ideal for fixed-shape return values like React's `useState` pair
- Named tuple labels improve IDE hints without changing runtime behavior
- Rest elements support flexible-length tuples with typed leading elements
- Still a plain array at runtime, so all array methods work as expected
AI Mentor Explanation
A tuple is like the fixed batting order slip handed to the umpire, where position one must always be an opener and position four must always be a specific role, unlike a general squad list where anyone can bat anywhere. Swapping who bats first and fourth without updating the slip is treated as an error, exactly like reordering elements in a typed tuple breaks the contract.
Step-by-Step Explanation
Step 1
Declare a fixed-length tuple
`let pair: [string, number] = ['age', 30];` fixes both the length (2) and the type at each index.
Step 2
Enforce order and type
`pair = [30, 'age'];` is a compile error since position 0 expects `string`, not `number`.
Step 3
Add optional elements
`[string, number?]` allows the second element to be omitted while keeping the first mandatory.
Step 4
Use rest elements
`[string, ...number[]]` fixes the first element's type while allowing any number of trailing numbers.
Step 5
Label for readability
`[name: string, age: number]` adds named hints in tooling without changing the underlying runtime array.
What Interviewer Expects
- Explains a tuple fixes both length and per-position type
- Can name a real use case like `useState()`'s `[value, setter]`
- Knows tuples are still plain arrays at runtime
- Understands optional and rest elements in tuple syntax
- Distinguishes a tuple from a same-type array like `number[]`
Common Mistakes
- Confusing a tuple with a regular typed array like `string[]`
- Assuming tuples enforce their shape at runtime, not just compile time
- Forgetting a tuple's length is fixed unless optional/rest elements are used
- Destructuring a tuple in the wrong order and expecting TypeScript to auto-correct it
Best Answer (HR Friendly)
“A tuple is a small, fixed-size list where each position has its own specific type, like a name paired with an age. It's useful when the order and type of each item matters, such as returning a pair of related values from a function.”
Code Example
let pair: [string, number] = ['age', 30];
// pair = [30, 'age']; // Error: Type 'number' is not assignable to type 'string'
let arr: number[] = [1, 2, 3]; // any length, all same typefunction useToggle(initial: boolean): [boolean, () => void] {
let state = initial;
const toggle = () => { state = !state; };
return [state, toggle];
}
const [isOn, toggle] = useToggle(false);Follow-up Questions
- How do optional tuple elements differ from rest elements in a tuple?
- Why does React's `useState` return a tuple instead of an object?
- Are tuples enforced at runtime, or purely a compile-time construct?
- How would you type a tuple with a variable-length tail of numbers?
- What is a named tuple label and does it change runtime behavior?
MCQ Practice
1. What does `let pair: [string, number]` enforce that `string[] `does not?
A tuple fixes both the number of elements and the type expected at each specific position, unlike a same-type array.
2. At runtime, what is a TypeScript tuple actually represented as?
Tuples are a compile-time-only construct; at runtime they are ordinary JavaScript arrays with no special behavior.
3. Which tuple type allows a string followed by any number of numbers?
The rest element syntax `...number[]` after a fixed `string` allows zero or more trailing numbers of variable length.
Flash Cards
What does a tuple fix that a regular array does not? — Both the exact length and the specific type expected at each index position.
Is a tuple's shape enforced at runtime? — No — it's purely a compile-time TypeScript check; at runtime it's a plain array.
Give a real-world example of a tuple return type. — React's `useState()` returns `[value, setter]` as a tuple.
How do you make a tuple's last element optional? — Add `?` after the type, e.g. `[string, number?]`.