Category: 05. Classes and Objects

In TypeScript, static properties belong to the class itself, instead of the instances of the class. The static methods and properties can be accessed without using the instance of the classes. This means you do not need to create an object of the class to use these methods and properties.

There are two types of properties and methods in TypeScript. One is instance properties and methods and another one is static properties and methods. Here, you will learn about static properties and methods.

Static properties and methods are useful to create utility functions and constants that don’t change across different instances. For example, if you are creating the circle class, and want to define the ‘PI’ property inside the class, you can make it static as it is a constant.

Static Properties

We can use the ‘static’ keyword before the property name to define static properties.

Syntax

You can follow the syntax below to define the static properties in TypeScript classes.

classclassName{static property_name: data_type = value;}

In the above syntax, we have used the ‘static’ keyword before the property name to define the static property.

To access the static property, we can use the class name followed by a dot followed by the static property name as shown below.

className.property_name;

Example

In the code below, we have created the ‘circle’ class. The class contains the ‘pi’ static property, which has a constant value.

classCircle{static pi:number=3.14159;// Static property to hold the value of Pi}console.log("The value of the PI is: "+ Circle.pi);

On compiling, it will generate the following JavaScript code.

var Circle =/** @class */(function(){functionCircle(){}
Circle.pi =3.14159;// Static property to hold the value of Pireturn Circle;}());console.log("The value of the PI is: "+ Circle.pi);</code></pre>


Output



The output of the above generated JavaScript code is as follows −



The value of the PI is: 3.14159




Example



In the code below, we have defined the 'student' class. It contains the static property named 'studentCount' to store the total number of students.



classStudent{static studentCount:number=0;// Static variable to store the count of studentsconstructor(public name:string,public age:number){this.name = name;this.age = age;
    Student.studentCount++;// Incrementing the count of students}// Method to display the student detailsdisplay(){console.log(Name: ${this.name}, Age: ${this.age});}}// Creating objects of Student classlet student1 =newStudent('John',20);let student2 =newStudent('Doe',21);// Accessing static variableconsole.log("Total number of registered students is: "+ Student.studentCount);// Output: 2</code></pre>


On compiling, it will generate the following JavaScript code.



classStudent{constructor(name, age){this.name = name;this.age = age;this.name = name;this.age = age;
    Student.studentCount++;// Incrementing the count of students}// Method to display the student detailsdisplay(){console.log(Name: ${this.name}, Age: ${this.age});}}
Student.studentCount =0;// Static variable to store the count of students// Creating objects of Student classlet student1 =newStudent('John',20);let student2 =newStudent('Doe',21);// Accessing static variableconsole.log("Total number of registered students is: "+ Student.studentCount);// Output: 2



Output



The output of the above generated JavaScript code is as follows −



Total number of registered students is: 2




Static Methods



You can use the 'static' keyword before the method name to declare the static method.



Syntax



You can follow the syntax below to define the static methods in TypeScript classes.



classClass_name{staticmethod_name(params){// Code to be executed}}



In the above syntax, the method_name method is a static method, which can take multiple parameters and return a value.



You can call the static method by accessing it using the class name as shown in the code below.



Class_name.method_name();



Example



In the code below, the 'square' class contains the 'area()' static method, which gets the value of the square side as a parameter and returns the area of the square.



classSquare{// Define a static methodstaticarea(side:number){return side * side;// return the area of the square}}// call the static methodlet area = Square.area(5);console.log(Area of the square: ${area});// Output: Area of the square: 25



On compiling, it will generate the following JavaScript code.



classSquare{// Define a static methodstaticarea(side){return side * side;// return the area of the square}}// call the static methodlet area = Square.area(5);console.log(Area of the square: ${area});// Output: Area of the square: 25



Output



The output of the above generated JavaScript code is as follows −



Area of the square: 25




Example



The below example is very similar to the second example covered in this lesson. It has a private static member named 'studentCount' to store the total number of students.



classStudent{privatestatic studentCount:number=0;// Static variable to store the count of studentsconstructor(public name:string,public age:number){this.name = name;this.age = age;
    Student.studentCount++;// Incrementing the count of students}// Method to get the count of studentsstaticgetStudentCount(){return Student.studentCount;}}// Creating objects of Student classlet student1 =newStudent('John',20);let student2 =newStudent('Doe',21);// Accessing static variableconsole.log("Total number of registered students is: "+ Student.getStudentCount());// Output: 2</code></pre>


On compiling, it will generate the following JavaScript code.



classStudent{constructor(name, age){this.name = name;this.age = age;this.name = name;this.age = age;
    Student.studentCount++;// Incrementing the count of students}// Method to get the count of studentsstaticgetStudentCount(){return Student.studentCount;}}
Student.studentCount =0;// Static variable to store the count of students// Creating objects of Student classlet student1 =newStudent('John',20);let student2 =newStudent('Doe',21);// Accessing static variableconsole.log("Total number of registered students is: "+ Student.getStudentCount());// Output: 2



Output



The output of the above generated JavaScript code is as follows −



Total number of registered students is: 2




In real-time development, static properties can be used to store values like application version, particular settings, etc. as they remain constant. In short, you can use static properties to store constant values. Furthermore, you can use static methods when the code of the method is not dependent on any instance property.

Inheritance in TypeScript is a concept that allows us to reuse the properties and methods of a single class with other classes. So, it increases the code readability by allowing the reuse of the codes of different classes.

TypeScript is an object-oriented programming language, and it supports all features of the OOP. Object-oriented programming has four main pillars and inheritance is one of them.

TypeScript mainly supports two types of inheritance: single-class inheritance and multilevel inheritance. We will explore each of them in this chapter.

Single Class Inheritance

In single-class inheritance, one class inherits the properties of another class. The class that inherits the properties of the other class is called the base class or child class. The class whose properties are inherited is called a parent or superclass.

You can use the ‘extend’ keyword to achieve inheritance in TypeScript.

Syntax

You can follow the syntax below to use the single-class inheritance.

classChildextendsParent{// Define properties and methods for child class}

In the above syntax, we have used the ‘extends’ keyword between the name of the child and the parent class.

Example

In the code below, we have defined the ‘Vehicle’ class which contains the ‘getType()’ method, returning the vehicle type.

classVehicle{getType(){return"Vehicle";}}// Define a class Car that extends VehicleclassCarextendsVehicle{
carName:string="Innova";getCarName(){returnthis.carName;}}// Create an object of Car classlet car =newCar();console.log(car.getType());// Output: Vehicleconsole.log(car.getCarName());// Output: Innova</code></pre>


On compiling, it will generate the following JavaScript code.



classVehicle{getType(){return"Vehicle";}}// Define a class Car that extends VehicleclassCarextendsVehicle{constructor(){super(...arguments);this.carName ="Innova";}getCarName(){returnthis.carName;}}// Create an object of Car classlet car =newCar();console.log(car.getType());// Output: Vehicleconsole.log(car.getCarName());// Output: Innova



Output



Vehicle
Innova




Super Keyword



The super keyword is used to call the constructor of the Parent class or access and call the method of the Parent class.



Syntax



You can follow the syntax below to use the super keyword to call the constructor and methods of the Parent class in the Child class.



classChildextendsParent{constructor(){super();// To call the constructor of the parent class}super.method_name();// To call method of the parent class}



In the above syntax, we have used the 'super()' inside the constructor of the child class to call the constructor of the parent class.



In 'super.method_name()', method_name is the name of the method of the parent class.



Example



In the code below, we have defined the Person class which contains the 'name' property, and initialized it inside the constructor() method. The display() method prints the value of the name property.



classPerson{
name:string;constructor(name:string){this.name = name;}display():void{console.log(this.name);}}// Employee class is inheriting the Person classclassEmployeeextendsPerson{
empCode:number;constructor(name:string, code:number){super(name);this.empCode = code;}show():void{super.display();}}// Creating the object of Employee classlet emp =newEmployee("Sam",123);
emp.show();// Sam



On compiling, it will generate the following JavaScript code.



classPerson{constructor(name){this.name = name;}display(){console.log(this.name);}}// Employee class is inheriting the Person classclassEmployeeextendsPerson{constructor(name, code){super(name);this.empCode = code;}show(){super.display();}}// Creating the object of Employee classlet emp =newEmployee("Sam",123);
emp.show();// Sam



Output



The above code example will produce the following result -



Sam




Method Overriding



The method overriding concept allows you to override the code of the particular method of the parent class inside the child class. This way, you can have a method with the same name in the parent and child classes, having different functionalities.



Example



In the code below, the Animal class has a move() method which works for any animal. After that, we have extended the Dog class with the Animal class. The Dog class has its own move() method, and that's how we do method overriding.



classAnimal{move(){console.log("Animal is moving");}}// Dog class is inheriting Animal classclassDogextendsAnimal{// Method overridingmove(){console.log("Dog is moving");}}let dog =newDog();
dog.move();// Output: Dog is moving



On compiling, it will generate the same JavaScript code.



Output



The above code example will produce the following result -



Dog is moving




Multilevel Inheritance



Multilevel inheritance allows you to inherit the properties of the parent class, where the parent class also inherits the other class.



Example



In the code below, the Parrot class inherits the properties and methods of the Bird class, and the Bird class inherits the properties and methods of the Animal class. However, you may have more levels of multilevel inheritance in real-time development.



classAnimal{// Move methodmove(){console.log('This animal moves');}}// Bird class extends Animal classclassBirdextendsAnimal{// Bird can flyfly(){console.log('This bird flies');}}// Parrot class inherits the Bird classclassParrotextendsBird{// Parrot can speakspeak(){console.log('The parrot speaks');}}// Creating an instance of the Parrot classletP1=newParrot();P1.speak();



On compiling, it will generate the same JavaScript code.



Output



The above code example will produce the following result -



The parrot speaks




Multiple Inheritance, Hierarchical Inheritance, and Hybrid Inheritance are also supported by some object-oriented programming languages but not supported by TypeScript. You may use the interface or prototype-based inheritance to achieve multiple inheritance.

TypeScript provides us with readonly keyword to make a property in class, type or interface as read-only. The readonly properties can be accessed outside the class but their values can’t be modified.

By using the readonly properties, you can ensure that no one can modify the property outside the object, but they can read the value of the property.

Syntax

To define readonly properties in TypeScript, we prefix the property name with the readonly keyword.

readonly propName: type;

Where,

• In the above syntax, ‘readonly’ is a keyword.
• The ‘propName’ is a property name of the readonly property.
• The ‘type’ is a property type of the readonly property.

The encapsulating entity may be a class or an interface in TypeScript.

You can replace propertyName with the desired name for the readonly property, and type with the appropriate data type.

The readonly Properties with Interface

Interface is used to define the prototype of the object. We can define the readonly properties in the interface. Let’s understand it via the example below.

Example

In the code below, we have defined the Car interface containing the model, year, and fuel properties. Here, the fuel property is readonly, which can be initialized only while creating the object but can’t be changed after creating the object.

After that, we have created the object of the Car type and initialized all properties.

You can try to change the value of the fuel property of the car object, and observe the error.

//  Defining the interface for the carinterfaceCar{
model:string;
year:number;readonly fuel:string;}// Defining the car objectlet car: Car ={
model:'BMW',
year:2019,
fuel:'petrol'}console.log(car.model);console.log(car.year);console.log(car.fuel);// Error: Cannot assign to 'fuel' because it is a read-only property.// car.fuel = 'diesel';</code></pre>


On compiling, it will generate the following JavaScript code.



// Defining the car objectlet car ={
model:'BMW',
year:2019,
fuel:'petrol'};console.log(car.model);console.log(car.year);console.log(car.fuel);// Error: Cannot assign to 'fuel' because it is a read-only property.// car.fuel = 'diesel';</code></pre>


Output



The output of the above example code is as follows −



BMW
2019
petrol




The readonly Properties with Classes



The class can also contain readonly properties similar to the interfaces. The value of the readonly properties can be initialized in the constructor() method while creating the object. You can't change the value of the readonly properties of the class using the class instance.



Example



In the code below, we have defined the car class which contains the model and price properties. It also contains the 'type' readonly property.



In the constructor() method, we initialize the values of all properties including the 'type' readonly property.



The display() method prints the values of all properties.



After that, we have created the object of the car class. Now, you can try to change the value of the 'type' property of the car object, it will throw an error as it is readonly.



// Defining the class for carclassCar{// Properties
model:string;
price:number;readonly type:string='Car';// Constructorconstructor(model:string, price:number, type:string){this.model = model;this.price = price;this.type = type;}// Methoddisplay():void{console.log(Model: ${this.model}, Price: ${this.price}, Type: ${this.type});}}// Creating object of Car classlet car =newCar('BMW',1000000,'Sedan');
car.display();// Try to change the value of readonly property// car.type = 'SUV'; // Error: Cannot assign to 'type' because it is a read-only property.



On compiling, it will generate the following JavaScript code.



// Defining the class for carclassCar{// Constructorconstructor(model, price, type){this.type ='Car';this.model = model;this.price = price;this.type = type;}// Methoddisplay(){console.log(Model: ${this.model}, Price: ${this.price}, Type: ${this.type});}}// Creating object of Car classlet car =newCar('BMW',1000000,'Sedan');
car.display();// Try to change the value of readonly property// car.type = 'SUV'; // Error: Cannot assign to 'type' because it is a read-only property.



Output



The output of the above code example is as follows −



Model: BMW, Price: 1000000, Type: Sedan




The readonly Properties with Type Aliases



Type aliases are used to define a type for the object. It can also contain readonly properties similar to the interface.



Example



In the code below, 'Point' is a type alias that contains 'x' and 'y' properties and both are readonly.



After that, we defined the P1 point of type 'Point' and initialized the values of 'X' and 'Y' properties while defining it.



Next, try to change the value of any property of the 'P1' point. It will throw an error as both properties of P1 are readonly.



//  Readonly Properties with type aliastypePoint={readonly x:number;readonly y:number;}let p1: Point ={ x:10, y:20};// p1.x = 5; // Errorconsole.log(p1.x, p1.y);



On compiling, it will generate the following JavaScript code.



let p1 ={ x:10, y:20};// p1.x = 5; // Errorconsole.log(p1.x, p1.y);



Output



The output is as follows −



10 20




Const vs. readonly Properties



The 'const' keyword is similar to the 'readonly' keyword but there are some minor differences.




The 'const' keyword is used to declare the constant variables, whereas the 'readonly' keyword is used to declare the readonly properties of objects.



You need to assign value to the variable declared using the 'const' keyword while declaring it, but for 'readonly' properties, you can assign values while creating the object.



The value of 'const' variables can't be changed after declaring it, and the value of 'readonly' properties can't be changed outside the object or class.




When to Use Readonly




Data Integrity: When you want to ensure that certain properties of an object don't change after their initial assignment.



Functional Programming: It helps in programming paradigms where immutability is a cornerstone.



API Contracts: When creating objects that are exposed to external users and you need to guarantee that the internal state won't be altered unexpectedly.

TypeScript is object oriented JavaScript. TypeScript supports object-oriented programming features like classes, interfaces, etc. A class in terms of OOP is a blueprint for creating objects. A class encapsulates data for the object. Typescript gives built in support for this concept called class. JavaScript ES5 or earlier didnt support classes. Typescript gets this feature from ES6.

Creating classes

Use the class keyword to declare a class in TypeScript. The syntax for the same is given below −

Syntax

class class_name { 
   //class scope 
}

The class keyword is followed by the class name. The rules for identifiers must be considered while naming a class.

A class definition can include the following −

• Fields − A field is any variable declared in a class. Fields represent data pertaining to objects
• Constructors − Responsible for allocating memory for the objects of the class
• Functions − Functions represent actions an object can take. They are also at times referred to as methods

These components put together are termed as the data members of the class.

Consider a class Person in typescript.

classPerson{}

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10var Person =(function(){functionPerson(){}return Person;}());

Example: Declaring a class

classCar{//field 
   engine:string;//constructor constructor(engine:string){this.engine = engine 
   }//function disp():void{console.log("Engine is  :   "+this.engine)}}

The example declares a class Car. The class has a field named engine. The var keyword is not used while declaring a field. The example above declares a constructor for the class.

A constructor is a special function of the class that is responsible for initializing the variables of the class. TypeScript defines a constructor using the constructor keyword. A constructor is a function and hence can be parameterized.

The this keyword refers to the current instance of the class. Here, the parameter name and the name of the classs field are the same. Hence to avoid ambiguity, the classs field is prefixed with the this keyword.

disp() is a simple function definition. Note that the function keyword is not used here.

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10var Car =(function(){//constructorfunctionCar(engine){this.engine = engine;}//function
   Car.prototype.disp=function(){console.log("Engine is  :   "+this.engine);};return Car;}());

Creating Instance objects

To create an instance of the class, use the new keyword followed by the class name. The syntax for the same is given below −

Syntax

var object_name = new class_name([ arguments ])

• The new keyword is responsible for instantiation.
• The right-hand side of the expression invokes the constructor. The constructor should be passed values if it is parameterized.

Example: Instantiating a class

var obj =newCar("Engine 1")

Accessing Attributes and Functions

A classs attributes and functions can be accessed through the object. Use the . dot notation (called as the period) to access the data members of a class.

//accessing an attribute 
obj.field_name 

//accessing a function 
obj.function_name()

Example: Putting them together

classCar{//field 
   engine:string;//constructor constructor(engine:string){this.engine = engine 
   }//function disp():void{console.log("Function displays Engine is  :   "+this.engine)}}//create an object var obj =newCar("XXSY1")//access the field console.log("Reading attribute value Engine as :  "+obj.engine)//access the function
obj.disp()

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10var Car =(function(){//constructorfunctionCar(engine){this.engine = engine;}//function
   Car.prototype.disp=function(){console.log("Function displays Engine is  :   "+this.engine);};return Car;}());//create an objectvar obj =newCar("XXSY1");//access the fieldconsole.log("Reading attribute value Engine as :  "+ obj.engine);//access the function
obj.disp();

The output of the above code is as follows −

Reading attribute value Engine as :  XXSY1 
Function displays Engine is  :   XXSY1

Class Inheritance

TypeScript supports the concept of Inheritance. Inheritance is the ability of a program to create new classes from an existing class. The class that is extended to create newer classes is called the parent class/super class. The newly created classes are called the child/sub classes.

A class inherits from another class using the extends keyword. Child classes inherit all properties and methods except private members and constructors from the parent class.

Syntax

class child_class_name extends parent_class_name

However, TypeScript doesnt support multiple inheritance.

Example: Class Inheritance

classShape{ 
   Area:numberconstructor(a:number){this.Area = a 
   }}classCircleextendsShape{disp():void{console.log("Area of the circle:  "+this.Area)}}var obj =newCircle(223); 
obj.disp()

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10var __extends =(this&&this.__extends)||function(d, b){for(var p in b)if(b.hasOwnProperty(p)) d[p]= b[p];function__(){this.constructor = d;}
   d.prototype = b ===null? Object.create(b):(__.prototype = b.prototype,new__());};var Shape =(function(){functionShape(a){this.Area = a;}return Shape;}());var Circle =(function(_super){__extends(Circle, _super);functionCircle(){_super.apply(this, arguments);}
	
   Circle.prototype.disp=function(){console.log("Area of the circle:  "+this.Area);};return Circle;}(Shape));var obj =newCircle(223);
obj.disp();

The output of the above code is as follows −

Area of the Circle: 223

The above example declares a class Shape. The class is extended by the Circle class. Since there is an inheritance relationship between the classes, the child class i.e. the class Car gets an implicit access to its parent class attribute i.e. area.

Inheritance can be classified as −

• Single − Every class can at the most extend from one parent class
• Multiple − A class can inherit from multiple classes. TypeScript doesnt support multiple inheritance.
• Multi-level − The following example shows how multi-level inheritance works.

Example

classRoot{ 
   str:string;}classChildextendsRoot{}classLeafextendsChild{}//indirectly inherits from Root by virtue of inheritance  var obj =newLeaf(); 
obj.str ="hello"console.log(obj.str)

The class Leaf derives the attributes from Root and Child classes by virtue of multi-level inheritance.

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10var __extends =(this&&this.__extends)||function(d, b){for(var p in b)if(b.hasOwnProperty(p)) d[p]= b[p];function__(){this.constructor = d;}
   d.prototype = b ===null? Object.create(b):(__.prototype = b.prototype,new__());};var Root =(function(){functionRoot(){}return Root;}());var Child =(function(_super){__extends(Child, _super);functionChild(){_super.apply(this, arguments);}return Child;}(Root));var Leaf =(function(_super){__extends(Leaf, _super);functionLeaf(){_super.apply(this, arguments);}return Leaf;}(Child));var obj =newLeaf();
obj.str ="hello";console.log(obj.str);

Its output is as follows −

Output

hello

TypeScript Class inheritance and Method Overriding

Method Overriding is a mechanism by which the child class redefines the superclasss method. The following example illustrates the same −

classPrinterClass{doPrint():void{console.log("doPrint() from Parent called")}}classStringPrinterextendsPrinterClass{doPrint():void{super.doPrint()console.log("doPrint() is printing a string")}}var obj =newStringPrinter() 
obj.doPrint()

The super keyword is used to refer to the immediate parent of a class. The keyword can be used to refer to the super class version of a variable, property or method. Line 13 invokes the super class version of the doWork() function.

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10var __extends =(this&&this.__extends)||function(d, b){for(var p in b)if(b.hasOwnProperty(p)) d[p]= b[p];function__(){this.constructor = d;}
   d.prototype = b ===null? Object.create(b):(__.prototype = b.prototype,new__());};var PrinterClass =(function(){functionPrinterClass(){}
   PrinterClass.prototype.doPrint=function(){console.log("doPrint() from Parent called");};return PrinterClass;}());var StringPrinter =(function(_super){__extends(StringPrinter, _super);functionStringPrinter(){_super.apply(this, arguments);}
	
   StringPrinter.prototype.doPrint=function(){
  _super.prototype.doPrint.call(this);console.log("doPrint() is printing a string");};return StringPrinter;}(PrinterClass));var obj =newStringPrinter();
obj.doPrint();

The output of the above code is as follows −

doPrint() from Parent called 
doPrint() is printing a string

The static Keyword

The static keyword can be applied to the data members of a class. A static variable retains its values till the program finishes execution. Static members are referenced by the class name.

Example

classStaticMem{static num:number;staticdisp():void{console.log("The value of num is"+ StaticMem.num)}} 

StaticMem.num =12// initialize the static variable 
StaticMem.disp()// invoke the static method

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10var StaticMem =(function(){functionStaticMem(){}
	
   StaticMem.disp=function(){console.log("The value of num is"+ StaticMem.num);};return StaticMem;}());

StaticMem.num =12;// initialize the static variable
StaticMem.disp();// invoke the static method

The output of the above code is as follows −

The value of num is 12

The instanceof operator

The instanceof operator returns true if the object belongs to the specified type.

Example

classPerson{}var obj =newPerson()var isPerson = obj instanceofPerson;console.log(" obj is an instance of Person "+ isPerson);

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10var Person =(function(){functionPerson(){}return Person;}());var obj =newPerson();var isPerson = obj instanceofPerson;console.log(" obj is an instance of Person "+ isPerson);

The output of the above code is as follows −

obj is an instance of Person True 

Data Hiding

A class can control the visibility of its data members to members of other classes. This capability is termed as Data Hiding or Encapsulation.

Object Orientation uses the concept of access modifiers or access specifiers to implement the concept of Encapsulation. The access specifiers/modifiers define the visibility of a classs data members outside its defining class.

The access modifiers supported by TypeScript are −

S.No.	Access Specifier & Description
1.	publicA public data member has universal accessibility. Data members in a class are public by default.
2.	privatePrivate data members are accessible only within the class that defines these members. If an external class member tries to access a private member, the compiler throws an error.
3.	protectedA protected data member is accessible by the members within the same class as that of the former and also by the members of the child classes.

Example

Let us now take an example to see how data hiding works −

classEncapsulate{ 
   str:string="hello"private str2:string="world"}var obj =newEncapsulate()console.log(obj.str)//accessible console.log(obj.str2)//compilation Error as str2 is private

The class has two string attributes, str1 and str2, which are public and private members respectively. The class is instantiated. The example returns a compile time error, as the private attribute str2 is accessed outside the class that declares it.

Classes and Interfaces

Classes can also implement interfaces.

interfaceILoan{ 
   interest:number}classAgriLoanimplementsILoan{ 
   interest:number 
   rebate:numberconstructor(interest:number,rebate:number){this.interest = interest 
  this.rebate = rebate 
   }}var obj =newAgriLoan(10,1)console.log("Interest is : "+obj.interest+" Rebate is : "+obj.rebate )

The class AgriLoan implements the interface Loan. Hence, it is now binding on the class to include the property interest as its member.

On compiling, it will generate following JavaScript code.

//Generated by typescript 1.8.10var AgriLoan =(function(){functionAgriLoan(interest, rebate){this.interest = interest;this.rebate = rebate;}return AgriLoan;}());var obj =newAgriLoan(10,1);console.log("Interest is : "+ obj.interest +" Rebate is : "+ obj.rebate);

The output of the above code is as follows −

Interest is : 10 Rebate is : 1