ARTICLE

Method Overriding in TypeScript

Posted by Nitin Bhardwaj Articles | TypeScript October 11, 2012
Tags: Method overriding, overriding in TypeScript, typescript, typescript method overriding
In this article I have described method overriding in TypeScript with an example.
Reader Level:

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

class empinfo

{  

    constructor (public emp_id: number,public fname: string,public lname: string)

    { 

    } 

    sayinfo()

    { 

         var span = document.createElement("span");

         span.style.color = "green";

         span.style.fontFamily = "Arial Black";

         span.innerText ="\n Base Class sayinfo() function\nEmp Id ->" + this.emp_id +"\n   

         Frist Name ->" + this.fname +"\nLast Name ->" + this.lname; 

         document.body.appendChild(span); 

    } 

}  

class emp extends empinfo

{ 

   sayinfo()

     { 

         var span = document.createElement("span");

         span.style.color = "Blue";

         span.innerText ="\n DriveClass sayinfo() function Override BaseClass sayinfo()

         function\n Frist Name ->" + this.fname +"\nLast Name ->" + this.lname+"\nEmp Id  

         ->" + this.emp_id; 

         document.body.appendChild(span); 

     } 

} 

window.onload = () => 

{  

    var first: empinfo = new emp(201,"Sachin","Bhardwaj");    

    first.sayinfo(); 

    var second: empinfo = new empinfo(101,"Nitin","Bhardwaj");

    second.sayinfo();

} 

 

overridedemo.html

<!DOCTYPEhtml>

<htmllang="en"xmlns="http://www.w3.org/1999/xhtml">

<head>

    <metacharset="utf-8"/>

    <title>override TypeScript HTML App</title>

    <linkrel="stylesheet"href="app.css"type="text/css"/>

    <scriptsrc="app.js"></script>

</head>

<body>

    <h2>Overriding in TypeScript HTML App</h2>

    <divid="content"/>

</body>

</html>

 

app.js

var __extends = this.__extends || function (d, b) {

    function __() { this.constructor = d; }

    __.prototype = b.prototype;

    d.prototype = new __();

}

var empinfo = (function () {

    function empinfo(emp_id, fname, lname) {

        this.emp_id = emp_id;

        this.fname = fname;

        this.lname = lname;

    }

    empinfo.prototype.sayinfo = function () {

        var span = document.createElement("span");

        span.style.color = "green";

        span.style.fontFamily = "Arial Black";

        span.innerText = "\n Base Class sayinfo() function\nEmp Id ->" + this.emp_id + "\n Frist    

        Name ->" + this.fname + "\nLast Name ->" + this.lname;

        document.body.appendChild(span);

    };

    return empinfo;

})();

var emp = (function (_super) {

    __extends(emp, _super);

    function emp() {

        _super.apply(this, arguments);

 

    }

    emp.prototype.sayinfo = function () {

        var span = document.createElement("span");

        span.style.color = "Blue";

        span.innerText = "\n DriveClass sayinfo() function Override BaseClass sayinfo() function\n

        Frist Name ->" + this.fname + "\nLast Name ->" + this.lname + "\nEmp Id ->" + this.emp_id;

        document.body.appendChild(span);

    };

    return emp;

})(empinfo);

window.onload = function () {

    var first = new emp(201, "Sachin","Bhardwaj");

    first.sayinfo();

    var second = new empinfo(101, "Nitin","Bhardwaj");

    second.sayinfo();

};

 

Output


final-result-overriding-type-script.gif

Reference By

http://www.typescriptlang.org/

Login to add your contents and source code to this article
This Feature is Sponsored By DynamicPDF Merger is a developers dream for interacting with any existing PDF documents. Merge, append, split, form fill, flatten stamp and so much more.
comments
COMMENT USING
PREMIUM SPONSORS
Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.
Get Career Advice from Experts
TRENDING UP
MOST LIKED ARTICLE
HOT KEYWORDS
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Join a Chapter
WHITEPAPERS AND BOOKS
Hosted By CBeyond Cloud Services MVPs MOST VIEWEDLEGENDSNOW PRIZESAWARDSREVIEWSSURVEYCERTIFICATIONSDOWNLOADS
PRIVACY POLICY | TERMS & CONDITIONS | SITEMAP | CONTACT US | ABOUT US | REPORT ABUSE
©2013 C# Corner. All contents are copyright of their authors.