What are Tuples in TypeScript?
Understand TypeScript tuples: fixed-length arrays with typed positions, plus optional, rest and labeled elements, and why useState returns a tuple.
Expected Interview Answer
A tuple is a fixed-length array type in TypeScript where each position has a known, specific type, so element order and types are enforced by the compiler.
Unlike a regular array such as 'number[]' where every element shares one type and the length is open, a tuple like '[string, number]' pins down both how many elements exist and what type sits at each index. TypeScript supports optional tuple elements, rest elements for variable tails, and labeled tuple members for readability. Tuples are ideal for returning multiple related values and are the underlying shape of React's useState pair.
- Enforces exact element order and types
- Documents the meaning of each position
- Great for functions returning multiple values
- Supports optional and rest elements
- Enables precise typing of fixed-shape data
AI Mentor Explanation
A tuple is like a dismissal record fixed as [batter, mode, bowler]: the first slot is always who was out, the second always how, the third always who took it. Swap the order and the scorecard becomes nonsense, so each position carries a defined, non-interchangeable meaning.
Step-by-Step Explanation
Step 1
Declare a tuple type
Write the types in order inside brackets, e.g. 'let pair: [string, number]'.
Step 2
Initialize matching positions
Assign values whose types match each slot exactly: 'pair = ["age", 30]'.
Step 3
Add optional or rest elements
Use '?' for trailing optional slots and '...T[]' for a variable-length tail, e.g. '[string, ...number[]]'.
Step 4
Label members for clarity
Use labeled tuples like '[first: string, second: number]' to document each position.
Step 5
Destructure safely
Pull out values by position: 'const [key, value] = pair', preserving each element's type.
What Interviewer Expects
- Difference between a tuple and a regular array
- Awareness of fixed length and per-position types
- Knowledge of optional and rest tuple elements
- Recognizing useState returns a tuple
- Ability to destructure tuples correctly
Common Mistakes
- Treating a tuple like an open-ended array
- Ignoring that element order carries type meaning
- Pushing extra items, which TypeScript allows loosening safety
- Confusing tuples with fixed-size runtime structures
- Forgetting labeled members improve readability
Best Answer (HR Friendly)
“A tuple is a small, fixed list where each spot has a set type and meaning, like a pair that is always a name followed by a number. It is useful when a function needs to return a couple of related values together in a predictable order.”
Code Example
// Fixed two-element tuple
let entry: [string, number] = ['age', 30];
// Labeled members document each position
type Point = [x: number, y: number];
const p: Point = [10, 20];
// Optional and rest elements
type Row = [id: number, ...cells: string[]];
const r: Row = [1, 'a', 'b', 'c'];
// Common case: useState returns a tuple
function useCounter(): [number, () => void] {
let count = 0;
return [count, () => { count++; }];
}
const [value, increment] = useCounter();Follow-up Questions
- How does a tuple differ from an interface or object type?
- What are labeled tuple elements and why use them?
- How do rest elements work inside a tuple type?
- Why does React's useState return a tuple instead of an object?
- Can you make a tuple readonly, and what does that enforce?
MCQ Practice
1. How does a tuple differ from a normal array type?
A tuple fixes both the number of elements and the type at each index, unlike an open array where all elements share one type.
2. Which tuple type has a variable-length string tail after a number?
A rest element '...string[]' allows any number of trailing strings after the initial number slot.
3. What does React's useState return?
useState returns a two-element tuple: the current state value and a function to update it.
Flash Cards
What is a tuple? — A fixed-length array type where each position has a specific, known type.
Tuple vs array? — Tuple: fixed length and per-index types. Array: open length, one shared element type.
How to allow a variable tail in a tuple? — Use a rest element, e.g. '[number, ...string[]]'.
Real-world tuple in React? — useState returns a [value, setter] tuple, destructured on use.