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 likethis.variable1 .
Example
constructor(rollnumber:number, name:string){
this.rollnumber = rollnumber
this.name = name
} Herethis.rollnumber andthis.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.