TypeScript Rest Parameters

Rest parameters in TypeScript allow a function to accept an arbitrary number of arguments as an array. This is useful when you do not know in advance how many arguments will be passed to the function. Rest parameters are denoted by three dots (...) followed by the parameter name.

 

Syntax for Rest Parameters

function functionName(...parameterName: type[]): returnType {
  // function body
}

In this syntax:

• parameterName is the name of the parameter that will hold the arguments passed to the function.
• type[] defines that parameterName will be an array containing the passed arguments.

Example of Rest Parameters

Here’s an example of using rest parameters in TypeScript:

function sum(...numbers: number[]): number {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4));   // Output: 10
console.log(sum(5, 10));        // Output: 15
console.log(sum(7));            // Output: 7

In this example:

• The sum function accepts any number of number type arguments, thanks to the rest parameter ...numbers.
• The reduce() method is used to sum all the values passed to the function.

Using Rest Parameters with Other Parameters

Rest parameters can be used in combination with regular parameters. However, rest parameters must always appear last in the function parameter list.

function printDetails(name: string, age: number, ...otherDetails: string[]): void {
  console.log(`Name: ${name}, Age: ${age}`);
  console.log("Other Details:", otherDetails);
}

printDetails("John", 30, "Engineer", "New York", "Likes coding"); 
// Output:
// Name: John, Age: 30
// Other Details: ["Engineer", "New York", "Likes coding"]

In this example:

• name and age are regular parameters.
• ...otherDetails is a rest parameter that collects any additional arguments as an array of strings.

Rest Parameters with Different Types

Rest parameters can be typed to accept any valid type, not just arrays of numbers or strings. Here’s an example with different data types:

function logMessages(...messages: (string | number)[]): void {
  messages.forEach(msg => console.log(msg));
}

logMessages("Hello", 42, "World", 3.14);
// Output:
// Hello
// 42
// World
// 3.14

Here:

• The messages rest parameter is typed as an array of string | number (meaning it can hold both strings and numbers).

Rest Parameters with Spread Syntax

You can also use the spread syntax (...) when calling a function to pass an array of arguments as individual arguments. This is essentially the inverse of rest parameters, where an array is expanded into separate values.

function logMessages(...messages: string[]): void {
  messages.forEach(msg => console.log(msg));
}

const messageArray = ["Hello", "TypeScript", "World"];
logMessages(...messageArray);
// Output:
// Hello
// TypeScript
// World

In this case:

• The ...messageArray syntax unpacks the array and passes each element as a separate argument to the logMessages function.

 

Summary

Rest parameters in TypeScript allow functions to accept a variable number of arguments. These arguments are collected into an array, making it easy to handle multiple inputs dynamically. You can use rest parameters with other regular parameters, but rest parameters must always appear last. Additionally, you can use the spread syntax to pass an array of values as individual arguments when calling a function. Rest parameters are helpful for functions like summing values, logging messages, or handling variable-length input efficiently.