Rest parameters with types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a function with rest parameters typed as numbers.

Typescript

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

Drag options to blanks, or click blank then click option'

Astring[]

Bnumber[]

Cany

Dboolean[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'any' instead of a specific type.

Forgetting to use array syntax '[]' for rest parameters.

The rest parameter 'numbers' should be typed as an array of numbers, which is 'number[]'.

2fill in blank

medium

Complete the code to type the rest parameter as an array of strings.

Typescript

function greetAll(...greetings: [1]) { greetings.forEach(greet => console.log(greet)); }

Drag options to blanks, or click blank then click option'

Astring[]

Bstring

CArray<string>

Dany[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' instead of 'string[]'.

Using 'any[]' which is less specific.

Rest parameters must be typed as arrays, so 'string[]' is the correct type for an array of strings.

3fill in blank

hard

Fix the error by correctly typing the rest parameter as an array of booleans.

Typescript

function checkFlags(...flags: [1]) { return flags.every(flag => flag === true); }

Drag options to blanks, or click blank then click option'

Aany

BArray<boolean>

Cboolean

Dboolean[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'boolean' instead of 'boolean[]'.

Using 'any' which is not specific.

Rest parameters must be typed as arrays, so 'boolean[]' is the correct type for an array of booleans.

4fill in blank

hard

Fill both blanks to declare a function with rest parameters typed as an array of numbers and return their product.

Typescript

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

Drag options to blanks, or click blank then click option'

Anums

Bnumber[]

Cvalues

Dstring[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string array type instead of number array.

Forgetting to name the rest parameter.

The rest parameter name can be 'nums' and its type should be 'number[]' to represent an array of numbers.

5fill in blank

hard

Fill all three blanks to declare a function with rest parameters typed as strings, filter those longer than 3 characters, and return the filtered array.

Typescript

function filterLongStrings(...[1]: [2]): [2] { return [1].filter(str => str.length > 3); }

Drag options to blanks, or click blank then click option'

Awords

Bstring[]

Cnumber[]

Dany[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number[]' or 'any[]' instead of 'string[]'.

Mismatching parameter and return types.

The rest parameter name is 'words', typed as 'string[]'. The function returns the same type 'string[]'.

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