Post
Ask Question

Method Overriding in TypeScript

TypeScript override method can be used to implement overriding in TypeScript Method overriding in TypeScript is a language feature that allows a derived class to provide a specific implementation of a method that is already provided by one of its or base classes. A member in a derived class is said to override a member in a base class when the derived class member has the same name and kind instance, or is static, as the base class member. A derived class will inherit all public members from its base class. The implementation in the derived class replaces the implementation in the base by providing a method that has the same signature, the same name or parameter, and the same return type as the method in the base class.
 
In the following example, we created two classes empinfo and emp. We are inheriting an emp class from the empinfo class and both classes have the same-named function sayinfo().
 
Step 1
 
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is shown as:
 
start-overriding-type-script.gif
 
Give the name of your application as "override" and then click ok.
 
Step 2
 
After this session the project has been created; your new project should look like this:
 
override-explorer-type-script.gif
 

Coding

 
override.ts
  1. class empinfo {  
  2.   constructor(public emp_id: number, public fname: string, public lname: string) {}  
  3.   sayinfo() {  
  4.     var span = document.createElement("span");  
  5.     span.style.color = "green";  
  6.     span.style.fontFamily = "Arial Black";  
  7.     span.innerText = "\n Base Class sayinfo() function\nEmp Id ->" + this.emp_id + "\n       
  8.     Frist Name - > " + this.fname +"\  
  9.     nLast Name - > " + this.lname;     
  10.     document.body.appendChild(span);  
  11.   }  
  12. }  
  13. class emp extends empinfo {  
  14.   sayinfo() {  
  15.     var span = document.createElement("span");  
  16.     span.style.color = "Blue";  
  17.     span.innerText = "\n DriveClass sayinfo() function Override BaseClass sayinfo()    
  18.   
  19.     function\ n Frist Name - > " + this.fname +"\  
  20.     nLast Name - > " + this.lname+"\  
  21.     nEmp Id  
  22.       -  
  23.       >  
  24.       " + this.emp_id;     
  25.     document.body.appendChild(span);  
  26.   }  
  27. }  
  28. window.onload = () => {  
  29.   var first: empinfo = new emp(201, "Sachin", "Bhardwaj");  
  30.   first.sayinfo();  
  31.   var second: empinfo = new empinfo(101, "Nitin", "Bhardwaj");  
  32.   second.sayinfo();  
  33. }   
overridedemo.html
  1. <!DOCTYPEhtml>  
  2. <htmllang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <metacharset="utf-8"/>  
  6.         <title>override TypeScript HTML App</title>  
  7.         <linkrel="stylesheet"href="app.css"type="text/css"/>  
  8.         <scriptsrc="app.js">  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <h2>Overriding in TypeScript HTML App</h2>  
  13.         <divid="content"/>  
  14.     </body>  
  15. </html>  
app.js
  1. var __extends = this.__extends || function(d, b) {  
  2.   function __() {  
  3.     this.constructor = d;  
  4.   }  
  5.   __.prototype = b.prototype;  
  6.   d.prototype = new __();  
  7. }  
  8. var empinfo = (function() {  
  9.   function empinfo(emp_id, fname, lname) {  
  10.     this.emp_id = emp_id;  
  11.     this.fname = fname;  
  12.     this.lname = lname;  
  13.   }  
  14.   empinfo.prototype.sayinfo = function() {  
  15.     var span = document.createElement("span");  
  16.     span.style.color = "green";  
  17.     span.style.fontFamily = "Arial Black";  
  18.     span.innerText = "\n Base Class sayinfo() function\nEmp Id ->" + this.emp_id + "\n Frist        
  19.     Name - > " + this.fname + "\  
  20.     nLast Name - > " + this.lname;    
  21.     document.body.appendChild(span);  
  22.   };  
  23.   return empinfo;  
  24. })();  
  25. var emp = (function(_super) {  
  26.   __extends(emp, _super);  
  27.   
  28.   function emp() {  
  29.     _super.apply(this, arguments);  
  30.   }  
  31.   emp.prototype.sayinfo = function() {  
  32.     var span = document.createElement("span");  
  33.     span.style.color = "Blue";  
  34.     span.innerText = "\n DriveClass sayinfo() function Override BaseClass sayinfo() function\n    
  35.     Frist Name - > " + this.fname + "\  
  36.     nLast Name - > " + this.lname + "\  
  37.     nEmp Id - > " + this.emp_id;    
  38.     document.body.appendChild(span);  
  39.   };  
  40.   return emp;  
  41. })(empinfo);  
  42. window.onload = function() {  
  43.   var first = new emp(201, "Sachin", "Bhardwaj");  
  44.   first.sayinfo();  
  45.   var second = new empinfo(101, "Nitin", "Bhardwaj");  
  46.   second.sayinfo();  
  47. };   
Output
 
final-result-overriding-type-script.gif
 
Referenced By


Similar Articles