Typescript - Tips & Tricks - Rest Parameters & Rest Arguments

Hi guy and welcome back :) Today I'll talk about the Rest Parameters and the Rest...

#typescript#webdev
Luca Del PuppoLuca Del Puppo
Article Series · Part 21 of 21TypeScript - Tips & Tricks
View full series (21)
  1. #19Part 19
    Mapped Types
  2. #20Previous
    Advanced Types
  3. #21Reading now
    Rest Parameters & Rest Arguments
Browse all 21 parts in this series
  1. #1typeof
  2. #2Literal Types
  3. #3keyof
  4. #4Union and Intersection
  5. #5Overloaded Functions
  6. #6this parameter
  7. #7any vs. unknown
  8. #8Optional modifier
  9. #9Index Signature
  10. #10readonly modifier
  11. #11Readonly Array
  12. #12Tuple
  13. #13Non-null assertion operator
  14. #14Never type
  15. #15Assert Function
  16. #16Type Guard
  17. #17Conditional Type
  18. #18infer keyword
  19. #19Mapped Types
  20. #20Advanced Types
  21. #21Rest Parameters & Rest ArgumentsCurrent

Hi guy and welcome back :) Today I’ll talk about the Rest Parameters and the Rest Arguments. Sometimes we need to write a simple code like this:

function multiply(a: number, b: number): number {
  return a * b;
}

const result1 = multiply(2, 2); // 4
const result2 = multiply(2, 3); // 3

but after a while the customer asks us to multiply for unbounded numbers, so we need to change our code. In these cases, typescript helps us with a feature called Rest Parameters. This feature permits us to identify this list of parameters as an array type so we can leave our consumer to call the method with the correct number of items he needs, and we can manipulate these parameters more easily. Therefore the previous example can be transformed in this way

function multiply(a: number, ...args: number[]): number {
  return args.reduce((acc, curr) => acc * curr, a);
}

const result1 = multiply(2, 2, 2); // 8
const result2 = multiply(2, 3, 2, 2); // 24

As you can see, now the consumer can call the “multiply” method as he prefers and our code responds correctly in all cases. In this example, we have called the “multiply” method with a fixed number of elements, 3 in the first case and 4 in the second one. But in some cases, we don’t know the correct number of elements and maybe they are in an array. To resolve these cases, typescript has another important feature tied to the Rest Parameters, the Rest Arguments. This feature helps us to convert the array elements to a list of parameters. Thus, we can call the “multiply” method in this way too.

const result1 = multiply(2, ...[2, 2]); // 8
const result2 = multiply(2, ...[3, 2, 2]); // 24

I think that these two features are really powerful, and can help you to manipulate large numbers of parameters and take your code simple and flexible.

And now a special greeting. This is the last post of this series Typescript - Tips & Tricks, I hope you enjoyed the series and it will help you in your daily work.

Many Thanks to have read the series. It’s not a goodbye, I’ll get back soon with other topics.

Bye, Bye Guys!

Luca Del Puppo

Written by Luca Del Puppo

Run, Code & Learn

AI Native Engineer at Nearform based in Povegliano (TV), Italy. Google Developer Expert in Web Technologies, GitKraken Ambassador, and Codemotion Ambassador.