Declare a Function with variable Number of Arguments in TS

avatar

Borislav Hadzhiev

Last updated: Mar 3, 2022

banner

Photo from Unsplash

Declare a Function with variable Number of Arguments in TS #

Use rest parameters to declare a function with variable number of arguments in TypeScript, e.g. function myFunction(...args: string[]) {}. Rest parameters are used when a function takes an indefinite number of arguments. They appear after all other parameters and use the ... syntax.

index.ts
// ✅ Example 1 (Named function) function getArgsAsArray(...args: string[]) { console.log(args); // 👉️ ['a', 'b', 'c'] return args; } console.log(getArgsAsArray('a', 'b', 'c')); // ✅ Example 2 (Arrow function) const multiply = (...numbers: number[]) => { console.log(numbers); return numbers.reduce((acc, curr) => acc * curr, 1); }; console.log(multiply(1, 2, 3, 4)); // 👉️ 24

We used rest parameters to declare functions that take a variable number of arguments.

The two functions in the example take any number of arguments. The ... syntax gathers the passed in arguments into an array.

Notice that we typed the rest parameters as Type[] and not Type. This is because the ... syntax gather all the passed in parameters into an array.

When using rest parameters, make sure to explicitly type them, because otherwise they will be implicitly typed as any[].

When using rest parameters, make sure they come last.

index.ts
// 👇️ rest parameter must come last function getArgsAsArray(str: string, ...args: string[]) { console.log(str); // 👉️ "a" console.log(args); // 👉️ ['b', 'c'] return args; } console.log(getArgsAsArray('a', 'b', 'c'));
The reason the rest parameter must come last is - there is no way for TypeScript to know when the rest parameter ends if you have other parameters after it.

When using rest parameters, make sure to:

  1. Type the rest parameter as an array.
  2. Only use rest parameters at the end of the function's parameter list.

You can also use a type alias if your function declaration gets too busy.

index.ts
type Multiply = (...numbers: number[]) => number; const multiply: Multiply = (...numbers) => { console.log(numbers); return numbers.reduce((acc, curr) => acc * curr, 1); }; console.log(multiply(1, 2, 3, 4)); // 👉️ 24

An easy way to think about rest parameters is:

  • all of the passed in values for the rest parameters are gathered into an array
  • only the last parameter in a function definition can be a rest parameter

Note that rest parameters are often confused with rest arguments.

The difference between parameters and arguments is - function parameters are the names listed in the function's definition, and function arguments are the real values passed to the function when invoking it.

Here is an example of using rest arguments.

index.ts
// 👇️ this is rest parameter function logger(...args: string[]) { console.log(args); // 👉️ ['a', 'b', 'c'] } const arr = ['a', 'b', 'c']; // 👇️ this is rest argument logger(...arr);

Rest arguments use the ... syntax as well, but are used when invoking a function, and not when defining one.

The arr variable is an array of strings, but the logger() function takes multiple, comma-separated strings, so we can't pass it an array of strings directly.

This is why we used rest arguments - to unpack the values of the array in the call to the logger() function.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.