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

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.