Post
Ask Question

Function Overloading in Typescript

Function Overloading in TypeScript

 
Function overloads allow a more accurate specification of the patterns of invocation supported by a function than is possible with a single signature. The compile-time processing of a call to an overloaded function chooses the best candidate overload for the particular arguments and the return type of that overload becomes the result type of the function call expression. Thus, using overloads, it is possible to statically describe the manner in which a function's return type varies based on its arguments. Function overloads are purely a compile-time construct. They have no impact on the emitted JavaScript and thus no run-time cost.
 
The parameter list of a function overload cannot specify default values for parameters. In other words, an overload may use only the? form when specifying optional parameters.
 
The following example shows the function overloading. In this example, I make a Testclass and it has two functions with the same name but different signatures. Let's see how I implement overloading in TypeScript. Let's use the following.
 
Step 1
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click HTML Application for TypeScript under Visual C#. Give the name of your application as "overload" and then click ok.
 
Step 2
After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, CSS file and HTML file as in the following:
 
explorer-type-script.gif
 

Coding

 
overload.ts
  1. class TestClass {  
  2.  Method(x: string);  
  3.  Method(y: number, x: number): void;  
  4.  Method(y: any, x ? : number): void {  
  5.   if (y && typeof y == "number") {  
  6.    var s: number;  
  7.    s = y * x;  
  8.    alert("First Overlode Function in Number ->" + s);  
  9.   } else {  
  10.    alert("Second Overlode Function in String ->" + y);  
  11.   }  
  12.  }  
  13. }  
  14. window.onload = () => {  
  15.  var obj1 = new TestClass();  
  16.  obj1.Method(5, 3);  
  17.  obj1.Method("C-sharpcorner");  
  18. };  
overloadexample.html
  1. < !DOCTYPEhtml >  
  2.  <  
  3.  htmllang = "en"  
  4. xmlns = "http://www.w3.org/1999/xhtml" >  
  5.  <  
  6.  head >  
  7.  <  
  8.  metacharset = "utf-8" / >  
  9.  <  
  10.  title > Function Overloading Example < /title>  
  11.  <  
  12.  linkrel = "stylesheet"  
  13. href = "app.css"  
  14. type = "text/css" / >  
  15.  <  
  16.  scriptsrc = "app.js" > < /script>  
  17.  <  
  18.  /head>  
  19.  <  
  20.  body >  
  21.  <  
  22.  h1 > Function Overloading in TypeScript HTML App < /h1>  
  23.  <  
  24.  divid = "content" / >  
  25.  <  
  26.  /body>  
  27.  <  
  28.  /html>  
app.js
  1. var TestClass = (function() {  
  2.  function TestClass() {}  
  3.  TestClass.prototype.Method = function(y, x) {  
  4.   if (y && typeof y == "number") {  
  5.    var s;  
  6.    s = y * x;  
  7.    alert("First Overload Function in Number ->" + s);  
  8.   } else {  
  9.    alert("Second Overload Function in String ->" + y);  
  10.   }  
  11.  };  
  12.  return TestClass;  
  13. })();  
  14. window.onload = function() {  
  15.  var obj1 = new TestClass();  
  16.  obj1.Method(5, 3);  
  17.  obj1.Method("C-sharpcorner");  
  18. };  
Output 1
 
first-overlode-function.gif
 
Click the "Ok" button.
 
Output 2
 
second-overlode-function.gif
 
Referenced By
http://www.typescriptlang.org/


Similar Articles