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.

Practice

1. What does the rest parameter syntax ...args: number[] do in a TypeScript function?

easy

A. It collects all remaining arguments into an array of numbers.

B. It restricts the function to accept only one number argument.

C. It declares a single number variable named args.

D. It spreads an array of numbers into separate arguments.

Solution

1. Step 1: Understand rest parameter syntax

   The ...args gathers all extra arguments passed to the function into one array.

2. Step 2: Recognize the type annotation

   The : number[] means this array contains only numbers.

3. Final Answer:

   It collects all remaining arguments into an array of numbers. -> Option A

4. Quick Check:

   Rest parameter with type = collects arguments as typed array [OK]

Hint: Rest parameters gather extra arguments into a typed array [OK]

Common Mistakes:

• Confusing rest parameter with spread operator
• Thinking it accepts only one argument
• Ignoring the type annotation on the rest parameter

2. Which of the following is the correct syntax to declare a function with a rest parameter of strings in TypeScript?

easy

A. function greet(...names: string[]) {}

B. function greet(names: ...string[]) {}

C. function greet(...names: string) {}

D. function greet(...names: [string]) {}

Solution

1. Step 1: Identify correct rest parameter syntax

   The rest parameter must use ... before the parameter name and be typed as an array type.

2. Step 2: Check each option

   function greet(...names: string[]) {} uses ...names: string[], which is correct. Others misuse the spread or array syntax.

3. Final Answer:

   function greet(...names: string[]) {} -> Option A

4. Quick Check:

   Rest parameter syntax = ...name: type[] [OK]

Hint: Rest parameter needs ... before name and array type after [OK]

Common Mistakes:

• Placing ... after the parameter name
• Using a single type instead of an array type
• Using tuple syntax instead of array type

3. What is the output of this TypeScript code?

function sum(...nums: number[]) {
  return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4));

medium

A. 1234

B. Error: nums is not iterable

C. undefined

D. 10

Solution

1. Step 1: Understand rest parameter collects arguments

   The ...nums collects all arguments into an array: [1, 2, 3, 4].

2. Step 2: Calculate sum using reduce

   The reduce adds all numbers: 1+2=3, 3+3=6, 6+4=10.

3. Final Answer:

   10 -> Option D

4. Quick Check:

   Sum of 1,2,3,4 = 10 [OK]

Hint: Rest gathers numbers; reduce sums them [OK]

Common Mistakes:

• Concatenating numbers as strings
• Forgetting initial value in reduce
• Misunderstanding rest parameter as single number

4. Identify the error in this TypeScript function:

function joinStrings(...strings: string) {
  return strings.join(", ");
}

medium

A. The function should return an array, not a string.

B. The join method cannot be used on strings.

C. Rest parameter must be typed as an array, e.g., string[].

D. Rest parameter cannot be used with strings.

Solution

1. Step 1: Check rest parameter type

   The rest parameter must be typed as an array type, like string[], not just string.

2. Step 2: Understand why join fails

   Since strings is typed as a single string, join method is invalid.

3. Final Answer:

   Rest parameter must be typed as an array, e.g., string[]. -> Option C

4. Quick Check:

   Rest parameter type = array type [OK]

Hint: Rest parameter type must be an array type [OK]

Common Mistakes:

• Typing rest parameter as a single element type
• Trying to call array methods on a non-array
• Ignoring TypeScript type errors

5. You want to create a TypeScript function multiplyAll that accepts any number of numeric arguments and returns their product. Which is the best way to type the rest parameter and implement this function?

hard

A. function multiplyAll(nums: number[]): number { return nums.reduce((a, b) => a * b); }

B. function multiplyAll(...nums: number[]): number { return nums.reduce((a, b) => a * b, 1); }

C. function multiplyAll(...nums: number): number { return nums.reduce((a, b) => a * b, 1); }

D. function multiplyAll(...nums: any[]): any { return nums.reduce((a, b) => a * b, 0); }

Solution

1. Step 1: Choose correct rest parameter typing

   The rest parameter must be typed as number[] to accept multiple numbers.

2. Step 2: Implement product with correct initial value

   Use reduce with initial value 1 to multiply all numbers correctly.

3. Step 3: Evaluate options

   function multiplyAll(...nums: number[]): number { return nums.reduce((a, b) => a * b, 1); } matches correct typing and logic. function multiplyAll(nums: number[]): number { return nums.reduce((a, b) => a * b); } lacks rest parameter. function multiplyAll(...nums: number): number { return nums.reduce((a, b) => a * b, 1); } has wrong type. function multiplyAll(...nums: any[]): any { return nums.reduce((a, b) => a * b, 0); } uses any and wrong initial value.

4. Final Answer:

   function multiplyAll(...nums: number[]): number { return nums.reduce((a, b) => a * b, 1); } -> Option B

5. Quick Check:

   Rest parameter typed number[] and reduce with 1 = correct [OK]

Hint: Rest parameter as number[] and reduce with 1 for product [OK]

Common Mistakes:

• Using single number type instead of array for rest
• Forgetting initial value in reduce
• Using any type losing type safety
• Starting reduce with 0 causing product always 0