Reader Level:
ARTICLE

Method Overriding in TypeScript

Posted by Nitin Bhardwaj Articles | TypeScript October 11, 2012
In this article I have described method overriding in TypeScript with an example.
  • 0
  • 0
  • 11449

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/

COMMENT USING

Trending up