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:

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

Referenced By

http://www.typescriptlang.org/

Method Overriding in TypeScript

Reactions

Coding

2 Comments