TypeScript Classes

In object-oriented programming languages like Java, classes are the fundamental entities which are used to create reusable components. It is a group of objects which have common properties. In terms of OOPs, a class is a template or blueprint for creating objects. It is a logical entity.

A class definition can contain the following properties:

Fields: It is a variable declared in a class.
Methods: It represents an action for the object.
Constructors: It is responsible for initializing the object in memory.
Nested class and interface: It means a class can contain another class.

TypeScript is an Object-Oriented JavaScript language, so it supports object-oriented programming features like classes, interfaces, polymorphism, data-binding, etc. JavaScript ES5 or earlier version did not support classes. TypeScript support this feature from ES6 and later version. TypeScript has built-in support for using classes because it is based on ES6 version of JavaSript. Today, many developers use class-based object-oriented programming languages and compile them into JavaScript, which works across all major browsers and platforms.

Syntax to declare a class

A class keyword is used to declare a class in TypeScript. We can create a class with the following syntax:

class <class_name>{  
    field;  
    method;  
}

Example

class Student {
    studCode: number;
    studName: string;

    constructor(code: number, name: string) {
            this.studName = name;
            this.studCode = code;
    }

    getGrade() : string {
        return "A+" ;
    }
}

The TypeScript compiler converts the above class in the following JavaScript code.

var Student = /** @class */ (function () {
    function Student(code, name) {
        this.studName = name;
        this.studCode = code;
    }
    Student.prototype.getGrade = function () {
        return "A+";
    };
    return Student;
}());

Creating an object of class

A class creates an object by using the new keyword followed by the class name. The new keyword allocates memory for object creation at runtime. All objects get memory in heap memory area. We can create an object as below.

Syntax

new keyword: it is used for instantiating the object in memory.
The right side of the expression invokes the constructor, which can pass values.

Example

//Creating an object or instance   
let obj = new Student();

Object Initialization

Object initialization means storing of data into the object. There are three ways to initialize an object. These are:

1. By reference variable

Example

//Creating an object or instance   
let obj = new Student();

//Initializing an object by reference variable
obj.id = 101;
obj.name = "Virat Kohli";

2. By method

A method is similar to a function used to expose the behavior of an object.

Advantage of Method

Code Reusability
Code Optimization

Example

//Defining a Student class.
class Student { 
    //defining fields  
    id: number;
    name:string;

    //creating method or function 
    display():void { 
        console.log("Student ID is: "+this.id) 
        console.log("Student ID is: "+this.name) 
    } 
} 

//Creating an object or instance   
let obj = new Student();
obj.id = 101;
obj.name = "Virat Kohli";
obj.display();

Output:

3. By Constructor

A constructor is used to initialize an object. In TypeScript, the constructor method is always defined with the name "constructor." In the constructor, we can access the member of a class by using this keyword.

Note: It is not necessary to always have a constructor in the class.

Example

//defining constructor 
constructor(id: number, name:string) { 
    this.id = id;
    this.name = name;
}  

Example with constructor, method and object:

//Defining a Student class.
class Student { 
    //defining fields  
    id: number;
    name:string;
   
    //defining constructor 
   constructor(id: number, name:string) { 
       this.id = id;
       this.name = name;
   }  
   
   //creating method or function 
   display():void { 
      console.log("Function displays Student ID is: "+this.id) 
      console.log("Function displays Student ID is: "+this.name) 
   } 
} 

//Creating an object or instance   
let obj = new Student(101, "Virat Kohli")

//access the field 
console.log("Reading attribute value of Student as: " +obj.id,)
console.log("Reading attribute value of Student as: " +obj.name)

//access the method or function
obj.display()

Output:

Example without constructor

//Defining a Student class.
class Student { 
    //defining fields  
    id: number;
    name:string;
} 

//Creating an object or instance   
let obj = new Student();

// Initializing an object
obj.id = 101;
obj.name = "Virat Kohli";

//access the field 
console.log("Student ID: " +obj.id,);
console.log("Student Name: " +obj.name);

Output:

Data Hiding

It is a technique which is used to hide the internal object details. A class can control the visibility of its data members from the members of the other classes. This capability is termed as encapsulation or data-hiding. OOPs uses the concept of access modifier to implement the encapsulation. The access modifier defines the visibility of class data member outside its defining class.

TypeScript supports the three types of access modifier. These are: