TypeScript Classes

Syntax to declare a class

We use the class keyword to declare TypeScript classes.

syntax:

class <class_name>{    
    field;    
    method;    
}

Example:

class Student {
    studentID: number;
    studentName: string;

    constructor(id: number, name: string) {
            this.studentID = id;
            this.studentName = name;
    }

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

The TypeScript compiler converts the above class into JavaScript code.

Creating an object

A class creates an object using the new keyword followed by the class name. The new keyword allocates memory for all the objects at runtime in the heap memory area.

Syntax:

let objectName = new className(parameter);

Example:    

let obj = new Student();  

Object Initialization

Object initialization means storing data in the object. There are three ways to initialize an instance or object of a class:

By reference variable

A reference variable is the most basic use case.

Example:

let obj = new Student();  
  
//Initializing an object by reference variable  
obj.id = 007;
obj.name = "James Bond";

By method

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

Example:

//Defining a Student class.
class Student {
    studentId: number;
    studentName:string;

    display():void {
        console.log("Student ID is: " + this.studentId)
        console.log("Student Name is: " + this.studentName)
    }
}

// Creating an object or instance
let obj = new Student();  
obj.id = 007;
obj.name = "James Bond";
obj.display();

Output:

By Constructor

A constructor is used to initialize an instance or object. In TypeScript classes, we define the constructor method as "constructor." We can access the class member in the constructor by using this keyword. It is not necessary to always have a constructor in the class.

Example:

class Student {
    // defining fields
    studentId: number;
    studentName:string;
     
    // defining constructor
   constructor(studentId: number, studentName:string) {
       this.studentId = studentId;
       this.studentName = studentName;
   }
   
   // creating display method
   display():void {
      console.log("Student ID is: "+ this.studentId);
      console.log("Student ID is: "+ this.studentName);
   }
}

// Creating an object or instance
let obj = new Student(7, "James Bond");

//access the fields
console.log("Value of Student ID is: " + obj.studentId,);
console.log("Value of Student Name is: " + obj.studentName);
  
//access the method or function
obj.display();

Output:

Getters / Setters

Typescript classes can also have accessors. If 'get' exists but is not 'set', the property is read-only. If the type of setter parameter is not defined, we assume it from the return type of the getter.

Example:

class Box {
  sideLength = 0;
  get length() {
    return this.sideLength;
  }
  set length(value) {
    this.sideLength = value;
  }
}

let box = new Box();
box.length = 10;
console.log(box.length);

Output:

Frequently Asked Questions

1. What is TypeScript?

TypeScript is a superset of JavaScript language, supporting object-oriented programming features like classes, interfaces, polymorphism, data-binding, data hiding, etc. JavaScript ES5 or earlier versions did not support classes.

2. What are TypeScript classes?

TypeScript classes came from the ES6 version and had built-in support for using classes since it is based on the ES6 version of JavaScript. Today, many developers use class-based object-oriented programming languages and compile them into JavaScript, which works across all major browsers and platforms. 

3. What is Data hiding?

Data hiding is a software development procedure used explicitly in object-oriented programming to hide internal object details (data members). Data hiding ensures complete data access to class members and protects object integrity by stopping unintentional or planned changes.

Key Takeaways

This article teaches about TypeScript Classes. We saw why it could be beneficial for a developer to learn. Click here to read about Typescript Interview Questions.

Click here to see other related blogs on Typescript.

Also, check out our web development course and blogs on Frontend Web Technologies.

If you are training for your DSA interviews then, Coding Ninjas Studio is a one-stop destination. This platform will help you gain effective coding techniques and overview student interview knowledge in various product-based organizations.

Happy Learning!