TypeScript Class – Syntax & Examples

TypeScript Class

TypeScript is object oriented programming language and Class is a basic concept of Object Oriented Programming. In this tutorial, we shall learn about classes in TypeScript and how to create objects of a class.

Class is basically a blueprint to create specific type of objects whose state and behavior is dictated by the variables and methods defined inside the class.

Syntax of TypeScript Class

Following is the basic syntax of defining a TypeScript Class :

class className{
    // variables
    // constructors
    // functions
}

• class is the keyword to declare a class.
• className is the name by which the class can be referenced.
• finite number of variables could be declared inside the class, which help to represent the state of objects belonging to the class type.
• constructors help to create objects of the class type with specified state passed as arguments to them.
• finite number of functions could be declared and defined inside the class, which help to define the behavior of objects of the class type.

Example – Simple Class

We shall look into a basic example, containing two variable, a constructor and a function. Then compile it to JavaScript code and analyze the code. Following is a student class with name and roll number as variables and displaying this information as behavior (function) of the class.

student.ts

class Student{
    // variables
    rollnumber:number
    name:string

    // constructors
    constructor(rollnumber:number, name:string){
        this.rollnumber = rollnumber
        this.name = name
    }

    // functions
    displayInformation():void{
        console.log("Name : "+this.name+", Roll Number : "+this.rollnumber)
    }
}

When compiled using tsc command line program,

$ tsc student.ts

The output JavaScript file is :

student.js

var Student = /** @class */ (function () {
    // constructors
    function Student(rollnumber, name) {
        this.rollnumber = rollnumber;
        this.name = name;
    }
    // functions
    Student.prototype.displayInformation = function () {
        console.log("Name : " + this.name + ", Roll Number : " + this.rollnumber);
    };
    return Student;
}());

TypeScript code is relatively easy to read when it comes to using object oriented concepts.

Now we shall look into each of variable, constructor and function declarations we have done in the example student.ts.

Declaring Variables in Class

To declare variables inside a class, write the variable name followed by the type. Unlike variables in a typical TypeScript, var keyword is not required.

 variableName: variableType

Example

 rollnumber: number
 name: string

Declaring and Defining Constructor in Class

Constructors are used to instantiate object of the class type with the variables of it initialized to specific values.

To define a constructor for a class, use the constructor keyword followed the list of variables enclosed in parenthesis, and then body of constructor enclosed in flower brackets.

Following is the syntax to declare and define a constructor :

constructor(variable1:variableType, variable2:variableType){
    // load class variables with the parameter values
}

If parameters of constructors and class variables share the same name, class variables could be referenced using this keyword like this.variable1 .

Example

constructor(rollnumber:number, name:string){
    this.rollnumber = rollnumber
    this.name = name
}

Here this.rollnumber  and this.name  refer class variables.

Declaring and Defining Function in Class

To define a function inside class, the rules of defining a function that we already discussed in TypeScript Functions hold.

Example

displayInformation():void{
    console.log("Name : "+this.name+", Roll Number : "+this.rollnumber)
}

displayInformation is the name of the function and here it does not accept any parameters and returns void (nothing). It just logs a string to console.

Class Objects

Objects are instances of a class. A class by itself does not occupy any space in program stack memory while execution, but objects do.

Syntax to Declare/Initialize Class Objects

Following is the syntax to create an object of a class type :

 var object1 = new ClassName(arguments)

• var is the keyword to declare object variable
• object1 is the name of the object of type ClassName
• new is the keyword used to create a new object of specified Class.
• arguments are optional and if provided, should match one of the constructors defined in class body.

Example

For the example Student class that we already saw at the start of this tutorial, we shall create two objects.

var student1 = new Student(2, "Rohit")
var student2 = new Student(4, "Kohli")

Accessing Variables and Calling Functions of an Object

Once the object of a Class type is created, the values of variables and functions could be accessed using dot operator.

Complete example is shown below.

example.ts

class Student{
    // variables
    rollnumber:number
    name:string

    // constructors
    constructor(rollnumber:number, name:string){
        this.rollnumber = rollnumber
        this.name = name
    }

    // functions
    displayInformation():void{
        console.log("Name : "+this.name+", Roll Number : "+this.rollnumber)
    }
}

var student1 = new Student(2, "Rohit")
var student2 = new Student(4, "Kohli")

// accessing variables
console.log(student1.name)
console.log(student2.rollnumber)

// calling functions
student1.displayInformation()
student2.displayInformation()

Transpiled JavaScript code would be as shown below:

example.js

var Student = /** @class */ (function () {
    // constructors
    function Student(rollnumber, name) {
        this.rollnumber = rollnumber;
        this.name = name;
    }
    // functions
    Student.prototype.displayInformation = function () {
        console.log("Name : " + this.name + ", Roll Number : " + this.rollnumber);
    };
    return Student;
}());
var student1 = new Student(2, "Rohit");
var student2 = new Student(4, "Kohli");
// accessing variables
console.log(student1.name);
console.log(student2.rollnumber);
// calling functions
student1.displayInformation();
student2.displayInformation();

Conclusion

In this TypeScript Tutorial, we have learnt about Classes in TypeScript with syntax and examples, what components are present inside the class, and how to instantiate the objects of the Class.