Typing Rest Parameters

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 27 of 73.

TypeScript provides rest parameters to handle this scenario elegantly while maintaining type safety.

Rest parameters use the spread operator (...) followed by a parameter name and a typed array. This collects all remaining arguments into a single array parameter:

function sum(...numbers: number[]): number {
  let total = 0;
  for (const num of numbers) {
    total += num;
  }
  return total;
}

// Can be called with any number of arguments
sum(1, 2);           // 3
sum(1, 2, 3, 4, 5);  // 15

The rest parameter must always be the last parameter in the function signature. TypeScript ensures that all arguments passed to the rest parameter match the specified array type, giving you the flexibility of variable arguments with the safety of static typing.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a function named sumAll that uses rest parameters to accept any number of numeric arguments and returns their sum as a number. The function should have an explicit return type annotation.

Create another function named findMaximum that uses rest parameters to accept any number of numeric arguments and returns the largest value among them as a number. The function should have an explicit return type annotation.

Create a third function named concatenateStrings that takes a required separator parameter of type string, followed by rest parameters that accept any number of string arguments. The function should return all the string arguments joined together with the separator between them. The function should have an explicit return type annotation of string.

Test your functions by calling them with the following values and printing the results:

Call sumAll with 5, 10, and 15
Call sumAll with 1, 2, 3, 4, and 5
Call findMaximum with 8, 3, 12, and 7
Call findMaximum with 25 and 18
Call concatenateStrings with "-" as separator and "apple", "banana", "cherry"
Call concatenateStrings with " | " as separator and "red", "green", "blue", "yellow"

Print each result on a separate line in the order specified above.

Cheat sheet

Rest parameters use the spread operator (...) to collect remaining arguments into a typed array:

function sum(...numbers: number[]): number {
  let total = 0;
  for (const num of numbers) {
    total += num;
  }
  return total;
}

// Can be called with any number of arguments
sum(1, 2);           // 3
sum(1, 2, 3, 4, 5);  // 15

The rest parameter must always be the last parameter in the function signature. You can combine regular parameters with rest parameters:

function concatenate(separator: string, ...strings: string[]): string {
  return strings.join(separator);
}

Try it yourself

// TODO: Write your code here

// Create the sumAll function with rest parameters


// Create the findMaximum function with rest parameters


// Create the concatenateStrings function with separator and rest parameters


// Test the functions and print results
console.log(sumAll(5, 10, 15));
console.log(sumAll(1, 2, 3, 4, 5));
console.log(findMaximum(8, 3, 12, 7));
console.log(findMaximum(25, 18));
console.log(concatenateStrings("-", "apple", "banana", "cherry"));
console.log(concatenateStrings(" | ", "red", "green", "blue", "yellow"));

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.