Method Overriding in TypeScript

Nitin Bhardwaj
13y
112.2k
0
0

Article

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:

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:

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

Reference By

http://www.typescriptlang.org/