Rest elements in tuples in Typescript - Step-by-Step Execution

Concept Flow - Rest elements in tuples

Define tuple with rest element

↓

Assign values to tuple

↓

Rest element collects remaining items

↓

Use tuple with fixed + rest elements

This flow shows how a tuple with a rest element collects remaining items into an array after fixed elements.

Execution Sample

Typescript

const tuple: [number, ...string[]] = [1, 'a', 'b', 'c'];
console.log(tuple[0]);
console.log(tuple.slice(1));

Defines a tuple with a number followed by any number of strings, then logs the first element and the rest.

Execution Table

Step	Action	Tuple Content	Rest Element Content	Output
1	Define tuple type [number, ...string[]]	[]	[]
2	Assign [1, 'a', 'b', 'c'] to tuple	[1, 'a', 'b', 'c']	['a', 'b', 'c']
3	Access tuple[0]	[1, 'a', 'b', 'c']	['a', 'b', 'c']	1
4	Access tuple.slice(1)	[1, 'a', 'b', 'c']	['a', 'b', 'c']	['a', 'b', 'c']
5	End of execution	[1, 'a', 'b', 'c']	['a', 'b', 'c']

💡 All elements assigned; rest element collects all strings after first number.

Variable Tracker

Variable	Start	After Assignment	Final
tuple	undefined	[1, 'a', 'b', 'c']	[1, 'a', 'b', 'c']
rest elements	undefined	['a', 'b', 'c']	['a', 'b', 'c']

Key Moments - 2 Insights

Why does the rest element collect multiple items instead of just one?

Because in the tuple type [number, ...string[]], the ...string[] means any number of strings after the first number, so all remaining items are grouped into an array as the rest element (see execution_table step 2).

Can the rest element be placed anywhere other than the end?

No, rest elements in tuples must be last to collect all remaining items. This is why the tuple type has the rest element at the end (see concept_flow).

Visual Quiz - 3 Questions

Look at the execution_table step 3, what is the value of tuple[0]?

A 'a'

B 1

C ['a', 'b', 'c']

D undefined

💡 Hint

Check the 'Output' column at step 3 in execution_table.

At which step does the rest element collect the strings 'a', 'b', and 'c'?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the 'Rest Element Content' column in execution_table.

If the tuple was defined as [number, string, ...boolean[]], what would the rest element collect?

A Only the first boolean

B All strings after the first number

C All booleans after the first number and string

D No elements, rest must be last

💡 Hint

Rest element collects all remaining items of its type after fixed elements (see concept_flow).

Concept Snapshot

Tuple with rest element syntax: [fixed1, fixed2, ...restType[]]
Rest element collects all remaining items into an array
Rest element must be last in tuple
Access fixed elements by index
Rest elements accessed as array slice
Useful for variable-length tuples

Full Transcript

This example shows how to use rest elements in TypeScript tuples. The tuple type [number, ...string[]] means the first element is a number, followed by any number of strings collected into an array. When assigning [1, 'a', 'b', 'c'], the first element is 1, and the rest element collects ['a', 'b', 'c']. Accessing tuple[0] gives 1, and tuple.slice(1) gives the rest array. Rest elements must be last in the tuple type. This helps handle tuples with fixed and variable parts.