Classes in TypeScript

14 Nov, 2019
Class in term of OOPs is a blueprint for creating objects. TypeScript supports object-oriented programming features like classes, Interfaces, Polymorphism, data-binding etc. Object means this a real world entity. JavaScript ES5 or earlier didn’t support classes. Typescript inherits this feature from ES6.
In class group of objects which have common properties. Class contains fields, methods, constructors, Blocks, Nestedclass and interface.
Syntax to declare a class:
class class_Name{    
    field;    
    method;    
}  

Here, in place of class_Name, name will be there, and inside field and method or function.If we compile this, It will generate JavaScript code.
// Generated by typescript 1.8.10
var Person = (function () {
   function Person() {
   }
   return Person;
}());

We will see a simple example:
class Person {perCode: number;perName: string;
constructor(code: number, name: string) {this.perName = name;this.perCode = code;}
getGrade() : string {return “A+” ;}}
The example declare a Student class which has two fields that is perCode and perName and a constructor which is special type of function which is responsible for variable or object initialization. Here is parameterized constructor. And this keyword which refers to the current instance of the class.getGrade() is a simple function.The TypeScript compiler will convert the above class in JavaScript code:ObjectsAn object is an instance of class which contains set of key value pairs. It’s value may be scalar values or functions or even array of other objects.The syntax is given below ?
var object_name = {
   // scalar value 
   key1: “value”, 

   // functions
   key2: function() { 
   }, 

   // collection  
   key3:[“content1”, “content2”] 
};

An objects can contain scalar value, functions and structures like arrays and tuples.We can represent object in literal notation:
var person = {fName:”Marry”,lName:”Jerry”};
// Access the object valuesconsole.log(person.fName)console.log(person.lName)
Marry
Jerry

Let’s see with simple example:
var person = {fName:”Vivek”,lName:”Hanks”,
// Type templateHello:function() { }}
person.Hello = function() {console.log(“hello “+person.fName)}
person.Hello()
Output:
hello Vivek

Objects as function parameters
var person = {fname:”Vivek”,lname:”Ranjan”};var hello = function(obj: { fname:string, lname:string }) {console.log(“first name :”+obj.fname)console.log(“last name :”+obj.lname)}hello(person)
Output:
first name :Vivek
last name :Ranjan

For creating Instance Objects.To create an instance of the class, use with the new keyword followed by the class name. To allocates memory for objects with the help new during runtime. Memory allocation for all objects in heap memory area. given below:
var object_name = new class_name([ arguments ])

see with simple example declaration:
// Creating an object or instance     
let obj = new Student();  

Accessing Attributes and Functions:A class’s attributes and functions can be accessed by the object. With the help of ‘ . ’ dot notation we access the data members of a class.
// Accessing an attribute 
obj.field_name 

// Accessing a function 
obj.function_name()

We will see with the example:
class Car {
// Fieldengine:string;
// Constructorconstructor(engine:string) {this.engine = engine}
// Functiondisplay():void {console.log(“Function displays Engine is :”+ this.engine)}}
// Create an objectvar o1 = new Car(“geeks”)
// Access the fieldconsole.log(“Reading attribute value Engine as: ”+ o1.engine)
// Access the functiono1.disp()
After compilation this will convert into JavaScript code look like://Generated by typescript 1.8.10
var Car = (function () {// Here is constructorfunction Car(engine) {this.engine = engine;}
// Function workingCar.prototype.display = function () {console.log(“Function displays Engine is: ”+ this.engine);};return Car;}());
// Create an objectvar o1 = new Car(“geks”);
// Access the field valueconsole.log(“Attribute value Engine as: ”+ o1.engine);
// Access the display functiono1.display();
Output:
Attribute value Engine as :  geeks
Function displays Engine is : geeks

shubham_singh
TypeScript
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
JavaScript String includes() Method
Implementation of LinkedList in Javascript
DOM (Document Object Model)
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to set the default value for an HTML <select> element ?