Post
Ask Question

Use of Params in TypeScript

Params in TypeScript

 
Sometimes we may require a variable number of arguments to be passed to a function; for example, we have a totalsal function which calculates the total salary of all employees, no matter how many employee's salaries are passed.
 
If we are using C# then we can use the "param" keyword and pass the number of arguments to a function, but TypeScript doesn't have the "param" keyword. In TypeScript, we use 3 (three) dots instead of a param keyword with a variable name. The behavior is the same as with-param keywords.
 
For example
 
The "params" keyword is used in C# and in TypeScript 3 (three) . . . (dots) is specified before the variable name and array type.
  1. methodname(... variable_name : type[]){}  
  2. MyMethos(... params : number[]){}  

What's param do

 
Params enable methods to receive a variable number of parameters. Basically, if you are using params (... variable name) in TypeScript, the argument passed to the method are changed by the compiler into an element in a temporary array and this array is then used in the receiving methods.
 
The main advantage of param is when designing a library for other programs to widely use. The best example of param is string concatenations.
 
The following examples show how to use params in TypeScript. Use the following instructions to create a program using params.
 
Step 1
 
Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window is opened. Provide the name of your application like "params", then click on the Ok button.
 
Step 2
 
After Step 1 your project has been created. The Solution Explorer, which is at the right side of Visual Studio, contains the js file, ts file, CSS file, and HTML files.
 
Step 3
 
The code of the params program.
 
params .ts
  1. class Test {  
  2.  Method1(value: string) { // only for single string value  
  3.   alert("" + value);  
  4.  }  
  5.  Method2(...params: number[]) { // Params but number type  
  6.   // var total=0;  
  7.   for (var i = 0; i < params.length; i++) {  
  8.    alert("" + params[i]);  
  9.   }  
  10.  }  
  11.  Method3(...params: any[]) { // params with any type  
  12.   // var total=0;  
  13.   for (var i = 0; i < params.length; i++) {  
  14.    alert("" + params[i]);  
  15.   }  
  16.  }  
  17. }  
  18. window.onload = () => {  
  19.  var data = new Test();  
  20.  data.Method1("Mcn Solution");  
  21.  data.Method2(1, 2, 3, 4, 5, 6);  
  22.  data.Method3(1, "Mcn", 3.3, 'c');  
  23. }  
default.html
  1. <!DOCTYPEhtml>  
  2. <htmllang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <metacharset="utf-8"/>  
  6.         <title>Params in TypeScript</title>  
  7.         <linkrel="stylesheet"href="app.css"type="text/css"/>  
  8.         <scriptsrc="app.js">  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <h1>Params in TypeScript</h1>  
  13.         <divid="content"/>  
  14.     </body>  
  15. </html>  
app.js
  1. var Test = (function() {  
  2.  function Test() {}  
  3.  Test.prototype.Method1 = function(value) {  
  4.   alert("" + value);  
  5.  };  
  6.  Test.prototype.Method2 = function() {  
  7.   var params = [];  
  8.   for (var _i = 0; _i < (arguments.length - 0); _i++) {  
  9.    params[_i] = arguments[_i + 0];  
  10.   }  
  11.   for (var i = 0; i < params.length; i++) {  
  12.    alert("" + params[i]);  
  13.   }  
  14.  };  
  15.  Test.prototype.Method3 = function() {  
  16.   var params = [];  
  17.   for (var _i = 0; _i < (arguments.length - 0); _i++) {  
  18.    params[_i] = arguments[_i + 0];  
  19.   }  
  20.   for (var i = 0; i < params.length; i++) {  
  21.    alert("" + params[i]);  
  22.   }  
  23.  };  
  24.  return Test;  
  25. })();  
  26. window.onload = function() {  
  27.  var data = new Test();  
  28.  data.Method1("Mcn Solution");  
  29.  data.Method2(1, 2, 3, 4, 5, 6);  
  30.  data.Method3(1, "Mcn", 3.3, 'c');  
  31. };  
Step 4
 
Output of Method1
 
It takes only a single string value (simple function):
 
params1-in-typescript.jpg
 
Output of Method2
 
It can take n number of arguments but all arguments must be numbers.
 
params2-in-typescript.jpg
 
Output of Method3
 
It can take n number of arguments and accepts all types.
 
params3-in-typescript.jpg


Similar Articles