Rest Parameters in TypeScript allow us to accept a variable number of arguments as an array. TypeScript introduced this feature in ES6. It is now the preferred way to access the variable number of arguments or the number of arguments is not known.
Table of Contents
Rest Parameters
We use the parameters to access the arguments inside the function. TypeScript expects us the provide the same number of arguments as there are parameters. We can supply less number of arguments only if the parameters are declared as optional Parameters. However, typescript will not allow us to pass more arguments than declared in the parameters.
You can see it from the following example. As you can see TypeScript throws an error if the number of arguments does not match the parameters
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function addNum(a:number, b:number) { return a + b ; } //0 Argument. console.log(addNum()); //Expected 2 arguments, but got 0. //1 Argument console.log(addNum(1)); //Expected 2 arguments, but got 1. //2 Argumnets console.log(addNum(1,2)); //Ok 3 //3 Arguments console.log(addNum(1,2,3)); //Expected 2 arguments, but got 3. |
But JavaScript allows passing a variable number of arguments and never throws any errors. We can use the Arguments object or Rest Parameters in JavaScript to access those arguments.
Using Rest Parameters
Rest Parameters in TypeScript lets us store the extra arguments that we supply to the function into an array.
Syntax
The syntax is shown below. We prefix the rest Parameter with ... (three dots) followed by the name of the rest parameter.
1 2 3 4 5 | function f(a:type, b:type, ...args:type[]) { // … } |
In the above syntax args is the rest parameter, while a & b are normal parameters. We must provide an array type to the rest parameter.
TypeScript assigns the arguments to parameters starting from left to right. First, it assigns the values to the regular parameters a & b. When it encounters a rest parameter it creates an array of all remaining arguments and assigns it to the Rest Parameter i.e. args.
You can pass any number of arguments to a rest parameter. You can even pass none.
The following function fnRest declares args as the rest parameter along with regular parameters a & b. As you can see the first two arguments (1 & 2 ) are mapped in the parameters a & b. The remaining arguments are stored as an array in the rest Parameter args.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function fnRest(a:number, b:number, ...args:number[]) { console.log("a", a); console.log("b", b); console.log("args", args); } fnRest(1,2,3,4,5); //Output: //a 1 //b 2 //args [ 3, 4, 5 ] //All addtional arguments are now stored in array |
Rules of Rest Parameters
Even if there is just one extra argument, it will be saved as a single element of an array.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function fnRest(a:number, b:number, ...args:number[]) { console.log("a", a); console.log("b", b); console.log("args", args); } fnRest(1,2,3); //Output: //a 1 //b 2 //args [ 3 ] //Array with single element |
If there is no argument provided then we get an empty array
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function fnRest(a:number, b:number, ...args:number[]) { console.log("a", a); console.log("b", b); console.log("args", args); } fnRest(1,2); //Output: //a 1 //b 2 //args [] //Empty Array |
The Rest Parameters must appear last in the Parameter list.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //Wrong function f1(a:number, ...restPara:number[], b:number):void { } //Wrong function f2(...restPara:number[],a:number, b:number):void { } //A rest parameter must be last in a parameter list. |
There can be only one rest parameter in a function.
1 2 3 4 5 6 7 | //Wrong function f(a:number, b:number, ...restPara1:number[],...restPara2:number[]):void { } |
Rest Parameters Example
The following example nums is a rest parameter. We invoke AddNum many arguments. All of them are captured in the nums array. We then loop through it using for loop and calculate the sum
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function AddNum(...nums:number[]){ let sum = 0; for(let i of nums){ sum+=i; } return sum; } console.log(AddNum(1,2)); // 3 console.log(AddNum(1,2,3)); // 6 console.log(AddNum(1,2,3,4,5)); // 15 console.log(AddNum(1,2,3,4,5,6,7,8,9,10)); // 55 |
Another example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function printNames(...names: string[]): void { console.log("Count " + names.length) for (let name of names) { console.log(name); } } printNames("Angular","TypeScript","JavaScript"); //Count 3 //Angular //TypeScript //JavaScript |
