Rest parameters with types in Typescript - Step-by-Step Execution

Concept Flow - Rest parameters with types

Function called with multiple arguments

↓

Rest parameter collects extra args into an array

↓

Function processes array elements

↓

Returns or outputs result

When a function uses rest parameters with types, it collects all extra arguments into a typed array for easy processing.

Execution Sample

Typescript

function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3));

This function sums any number of numeric arguments passed to it.

Execution Table

Step	Action	nums array content	Intermediate sum	Output
1	Function called with arguments (1, 2, 3)	[1, 2, 3]	-	-
2	Start reduce with initial value 0	[1, 2, 3]	0	-
3	Add first element 1 to sum	[1, 2, 3]	1	-
4	Add second element 2 to sum	[1, 2, 3]	3	-
5	Add third element 3 to sum	[1, 2, 3]	6	-
6	Return final sum	[1, 2, 3]	6	6
7	console.log outputs	[1, 2, 3]	6	6

💡 All arguments processed, sum returned and printed

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
nums	undefined	[1, 2, 3]	[1, 2, 3]	[1, 2, 3]	[1, 2, 3]	[1, 2, 3]	[1, 2, 3]
sum	undefined	0	1	3	6	6	6

Key Moments - 3 Insights

Why does nums become an array even though multiple arguments are passed?

Because the rest parameter syntax (...nums: number[]) collects all extra arguments into a single array named nums, as shown in execution_table step 1.

How does TypeScript know what type the elements in nums are?

The type annotation number[] after ...nums tells TypeScript that nums is an array of numbers, ensuring type safety during operations like reduce (see execution_table steps 2-5).

What happens if no arguments are passed to the function?

nums becomes an empty array, so reduce starts with initial value 0 and returns 0 immediately, similar to step 2 but with empty nums.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the intermediate sum after adding the first element?

A 1

B 2

C 0

D 3

💡 Hint

Check the 'Intermediate sum' column at step 3 in the execution_table.

At which step does the function return the final sum?

A Step 5

B Step 6

C Step 4

D Step 7

💡 Hint

Look for the step labeled 'Return final sum' in the execution_table.

If the function is called with no arguments, what would nums be?

A undefined

B null

C empty array []

D array with one element 0

💡 Hint

Refer to key_moments explanation about no arguments passed.

Concept Snapshot

Rest parameters collect extra function arguments into a typed array.
Syntax: function fn(...args: Type[]).
Allows flexible number of inputs.
TypeScript enforces element types.
Use array methods to process args.
Example: sum(...nums: number[]): number.

Full Transcript

This visual execution shows how rest parameters with types work in TypeScript. When the function sum is called with arguments 1, 2, and 3, the rest parameter nums collects them into an array [1, 2, 3]. The function then uses reduce to add these numbers step-by-step, updating the intermediate sum from 0 to 6. Finally, the sum 6 is returned and printed. The variable tracker shows nums stays the same array, while sum updates each addition. Key moments clarify why nums is an array, how types are known, and what happens if no arguments are passed. The quiz tests understanding of intermediate sums, return steps, and empty argument cases.