How to Use Super Keyword In TypeScript

super keyword in TypeScript

The super keyword can be used in expressions to reference base class properties and the base class constructor. Super calls consist of the keyword super followed by an argument list enclosed in parentheses. Super calls are only permitted in constructors of derived classes.

super call

A super call invokes the constructor of the base class on the instance referenced by this. A super call is processed as a function call using the construct signatures of the base class constructor function type as the initial set of candidate signatures for overload resolution.

The type of a super call expression is Void.

super property

A super property access consists of the keyword super followed by a dot and an identifier. Super property accesses are used to access base class instance member functions from derived classes. A super property access is permitted only in a constructor, instance member function, or instance member accessor of a derived class and must specify a public instance member function of the base class. It is not possible to access other kinds of base class members in a super property access.

Super property accesses are typically used to access overridden base class instance member functions from derived class instance member functions.

In the following example, we are passing the name to the base class constructor from the derived class constructor. Also, note that we are using a parameter property declaration to declare properties with the same name and value as constructor parameters.

TypeScript application

Let's use the following steps.

Step 1. Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is shown as:

Give the name of your application as "super" and then click ok.

Step 2. After this session the project has been created; your new project should look like this:

Coding

super.ts

class person {
constructor(public name: string) {}
}
class intro extends person {
constructor(public name: string, public age: number) {
super(name);
}
sayHello() {
var span = document.createElement("span");
span.innerText = "Hello, I'm " + this.name + " with age " + this.age;
document.body.appendChild(span);
}
}
window.onload = () => {
var d: intro = new intro("Nitin", 23);
d.sayHello();
}

superkeyworddemo.html

< !DOCTYPEhtml >
<
htmllanghtmllang = "en"
xmlns = "http://www.w3.org/1999/xhtml" >
<
head >
<
metacharsetmetacharset = "utf-8" / >
<
title > TypeScript HTML App < /title> <
linkrellinkrel = "stylesheet"
href = "app.css"
type = "text/css" / >
<
scriptsrcscriptsrc = "app.js" > < /script> <
/head> <
body >
<
h3 > "Super Keyword"
Example in TypeScript HTML App < /h3> <
dividdivid = "content" / >
<
/body> <
/html>

app.js

var __extends = this.__extends || function(d, b) {
function __() {
this.constructor = d;
}
__.prototype = b.prototype;
d.prototype = new __();
}
var person = (function() {
function person(name) {
this.name = name;
}
return person;
})();
var intro = (function(_super) {
__extends(intro, _super);
function intro(name, age) {
_super.call(this, name);
this.name = name;
this.age = age;
}
intro.prototype.sayHello = function() {
var span = document.createElement("span");
span.innerText = "Hello, I'm " + this.name + " with age " + this.age;
document.body.appendChild(span);
};
return intro;
})(person);
window.onload = function() {
var d = new intro("Nitin", 23);
d.sayHello();
};

Output

Summary

In this article, we learned how to use the TypeScript super keyword.