TypeScript Classes

In programming languages that utilize object-oriented principles, such as Java, classes serve as the essential constructs for developing reusable components. A class represents a collection of objects that share similar characteristics. Within the context of OOP, a class functions as a template or blueprint for generating objects. It is considered 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 variant of JavaScript, thus it incorporates object-oriented programming elements such as classes, interfaces, polymorphism, and data-binding. The JavaScript ES5 version and its predecessors lacked support for classes. TypeScript includes this capability starting from ES6 and subsequent versions. Since it is founded on the ES6 iteration of JavaScript, TypeScript offers native support for classes. Currently, numerous developers utilize class-based object-oriented programming languages and transpile them into JavaScript, ensuring compatibility with all major browsers and platforms.

Syntax to declare a class

In TypeScript, the class keyword is employed to define a class. A class can be instantiated using the subsequent 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 translates the class depicted above into the corresponding JavaScript code shown below.

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

An object is instantiated by a class utilizing the new keyword, which is succeeded by the class name. The new keyword is responsible for allocating memory for the object during runtime. All objects are allocated memory within the heap memory region. An object can be created in the following manner.

Syntax

let object_name = new class_name(parameter)

• ✅ 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 refers to the process of assigning data to an object. There are three methods to initialize an object. These include:

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 akin to a function that reveals the behavior of an object.

Benefits of the Approach

• ✅ Reusability of Code
• ✅ Optimization of Code

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 serves the purpose of initializing an object. In TypeScript, the method designated as the constructor is consistently named "constructor." Within this constructor, members of a class can be accessed utilizing the 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

This approach is utilized to obscure the internal details of objects. A class has the ability to regulate the access to its data members from other classes. This feature is referred to as encapsulation or data-hiding. Object-Oriented Programming (OOP) employs the notion of access modifiers to facilitate encapsulation. Access modifiers determine the visibility of a class's data members from outside the class in which they are defined.

TypeScript provides three categories of access modifiers. They include:

For additional details regarding the access modifier, click here.