Rest Parameters in Typescript Functions

In Typescript, rest parameters allow you to represent an indefinite number of arguments as an array. This is useful when you don’t know in advance how many arguments a function will receive, or when you want to pass a variable number of arguments to another function. In this article, we’ll take a closer look at how to use rest parameters in Typescript functions.

What are Rest Parameters?

Rest parameters are a way to represent an indefinite number of arguments as an array. They are denoted by three dots (…) followed by the name of the array that will hold the arguments. For example:

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

In the above example, the function “sum” takes an indefinite number of arguments of type “number” and stores them in an array named “numbers”.

It’s important to note that rest parameters must be the last parameter in a function’s parameter list. This is because the rest parameter collects all remaining arguments into an array. If there are any other parameters after the rest parameter, they will not be included in the array.

Using Rest Parameters in Typescript Functions

Now that we’ve seen how to declare a rest parameter, let’s look at some examples of how to use it in a Typescript function.

One common use case for rest parameters is to pass a variable number of arguments to another function. For example, let’s say we have a function that logs messages to the console:

function log(message: string, ...values: any[]) {
  console.log(message, ...values);
}

In this example, the “log” function takes a message string as its first argument and an indefinite number of additional arguments as a rest parameter. The rest parameter is then spread using the spread operator (…) when the message and values are logged to the console.

This allows us to pass a variable number of arguments to the “log” function, like this:

log('Hello, world!'); // Outputs: "Hello, world!"
log('The value of x is:', x); // Outputs: "The value of x is: 10"
log('The values of x and y are:', x, y); // Outputs: "The values of x and y are: 10 20"

Another use case for rest parameters is to perform calculations on a variable number of arguments. For example, let’s say we want to write a function that calculates the average of a given set of numbers:

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

In this example, the “average” function takes an indefinite number of numbers as a rest parameter and calculates their average by summing the numbers and dividing by the length of the array.

This allows us to pass a variable number of arguments to the “average” function and calculate their average, like this:

console.log(average(1, 2, 3, 4, 5)); // Outputs: 3
console.log(average(1, 3, 5, 7, 9)); // Outputs: 5
console.log(average(10, 20, 30)); // Outputs: 20

Rest Parameters and Type Inference

In Typescript, the type of the rest parameter is inferred from the arguments that are passed to the function. For example:

function printValues(...values: any[]) {
  console.log(values);
}

printValues(1, 'hello', true); // Outputs: [1, 'hello', true]

In this example, the “printValues” function takes an indefinite number of arguments and stores them in an array of type “any”. Since we passed a number, a string, and a boolean to the function, the rest parameter is inferred to be of type “any[]”.

If we want to specify a more specific type for the rest parameter, we can do so by annotating the parameter with the desired type. For example:

function printNumbers(...numbers: number[]) {
  console.log(numbers);
}

printNumbers(1, 2, 3, 4, 5); // Outputs: [1, 2, 3, 4, 5]

In this example, the “printNumbers” function takes an indefinite number of numbers and stores them in an array of type “number”.

Conclusion

Rest parameters are a useful feature in Typescript that allow you to represent an indefinite number of arguments as an array. They can be used to pass a variable number of arguments to another function or to perform calculations on a set of arguments. By using rest parameters and the spread operator, you can write flexible and reusable functions in Typescript.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

function concatStrings(...strings: string[]): string {
  return strings.join(' ');
}

console.log(concatStrings('Hello', 'world')); // Outputs: "Hello world"
console.log(concatStrings('Hello', 'world', '!')); // Outputs: "Hello world!"

function findMax(...numbers: number[]): number {
  return Math.max(...numbers);
}

console.log(findMax(1, 2, 3)); // Outputs: 3
console.log(findMax(5, 2, 10, 7, 3)); // Outputs: 10
console.log(findMax(-1, -5, -10)); // Outputs: -1

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

console.log(calculateTotal(1, 2, 3)); // Outputs: 6
console.log(calculateTotal(5, 2, 10, 7, 3)); // Outputs: 27
console.log(calculateTotal(-1, -5, -10)); // Outputs: -16

function countWords(...strings: string[]): number {
  let total = 0;
  for (const string of strings) {
    total += string.split(' ').length;
  }
  return total;
}

console.log(countWords('Hello', 'world')); // Outputs: 2
console.log(countWords('The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog')); // Outputs: 9
console.log(countWords('This', 'is', 'a', 'sentence', 'with', 'five', 'words')); // Outputs: 7

function flattenArray(...arrays: any[][]): any[] {
  return arrays.flat();
}

console.log(flattenArray([1, 2, 3], [4, 5, 6], [7, 8, 9])); // Outputs: [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(flattenArray(['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i'])); // Outputs: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
console.log(flattenArray([true, false, true], [false, true, false])); // Outputs: [true, false, true, false, true, false]