Updated March 28, 2023
Introduction to Typescript class
In typescript, the class is defined as an object-oriented concept for creating components that are reusable where the objects are created by encapsulating data for these objects, which was earlier not supported by JavaScript ES6 and hence typescript class is object-oriented JavaScript class which supports the oops concepts as the other programming languages support. In general, the class can be defined as a term of object-oriented concept for creating objects to encapsulate object’s data and create components that can be used again and again by providing “class” as a keyword followed by the class name. Hence classes in typescript are introduced for introducing techniques like abstraction and encapsulation.
Working of classes in typescript with examples
In this article, we will discuss the class concept in typescript. The class concept is defined as an object-oriented concept that is used for providing techniques like abstraction and encapsulation by creating objects which is a logical entity and will be used to encapsulate an object’s data and create components that can be reused by using the keyword “class” with the class name. In typescript, classes are the fundamental concepts of OOPS for the creation of objects and for reusing the components that are created. The compiler compiles the class in typescript to plain JavaScript functions to help it work across the different platforms and browsers that were not supported in JavaScript ES6 and above versions, where typescript provides built-in support for using OOPS concepts. In general, we can say a class is where we are creating objects or a set of objects that have the same properties, and a class can have methods, constructors, interfaces, other classes such as nested classes, etc. Typescript also supports other object-oriented features that are implemented, such as classes, polymorphism, interfaces, abstraction, encapsulation, etc.
In typescript, the class is declared using the “class” keyword followed by the class name. The syntax for declaring class is as shown below.
Syntax:
class class_name
{
Class scopes such as fields, methods, properties, etc.
}The above syntax is used when declaring the class, and when we use this class keyword followed by the name given to the class is used for creating the identifiers such as one a typescript interface that holds methods, properties, or any other class scopes also known as data members of the class, second JavaScript variable with different constructor function type where the typescript code with above syntax gets converted to JavaScript.
Now we will see a simple example of how to declare a class in typescript, which will demonstrate how to declare a class in typescript in the below section.
Example:
class Institute
{
course_id: number;
course_name:string;
display():void {
console.log("Course ID is : ");
console.log(this.course_id);
console.log("Course name is : ");
console.log(this.course_name);
}
}
console.log("Demonstration of classes in typescript");
let obj = new Institute();
obj.course_id = 23;
obj.course_name = "Python";
obj.display();Output:
In the above program, we can see we are declaring a class with keyword class and naming it as “Institute,” and then we are creating fields named with their types such as “course_id” and “course_name” where we are displaying the values when these field values are accessed which are known as accessing of the attributes using. “” notation is known as a period which is used for accessing the data members of the class and to print the values of these attributes we are using console.log command, which is declared within the display() function which is created within the class, and the class method is also accessed using this period or. “” notation, where the “this” keyword in the display() function is used to refer to the current instance of the current class and “this” keyword is used to avoid the ambiguity if the parameter of the class and field name within the class are same.
Now we will see another example of a demonstration of class where we will also see how the object is created in the below section.
Example:
class Educba_Inst {
Inst_place:string;
Inst_emp_name:string;
constructor(Inst_place:string, Inst_emp_name:string) {
this.Inst_place = Inst_place;
this.Inst_emp_name = Inst_emp_name;
}
display():void {
console.log("The Institute Educba located at place: ");
console.log(this.Inst_place);
console.log("The employee name in that place is: ");
console.log(this.Inst_emp_name);
}
}
console.log(" Demonstration of classes to create onjects in typescript");
var obj = new Educba_Inst("Delhi","Snehal")
console.log(" The values are accessed as below: ");
console.log(" The place value assigned is: ")
console.log(obj.Inst_place);
console.log(" The employee name value assigned is:" )
console.log(obj.Inst_emp_name);
obj.display()Output:
In the above program, we are declaring a class with class name as “Educba_Inst” in which it holds fields, constructor and method such as fields are declared as “Inst_place” and “Inst_emp_name” and then we are defining the constructors which are special function in the class for initializing the field variables of the class ad this is declared using “constructor” keyword in typescript ad as it is a function it can hold arguments and can be accessed by passing the values to the given parameters. Then we have defined a display() method for printing the values of the fields declared. Then to create an object of this class, we are using the keyword “new,” which is used for instantiation, and the object name is declared using “var.” Therefore we can see in the above code var obj is the left-hand-side for declaring object. The right-hand side are used for invoking the constructor, which is declared. We have to pass the values as the parameters passed to the constructor when it was defined within the class, so in the above code, the object is created using the class name, and the output of the above program can be seen in the above screenshot.
Conclusion
In this article, we conclude that class in typescript is defined as the object-oriented concept, which is more supported in typescript as it is not supported in JavaScript ES6, and the class is defined as an OOPS concept that is used for creating objects which are instances of classes. In this article, we saw how a simple class is declared using the “class” keyword with a class name which is demonstrated in the example above. Furthermore, in the above article, we also saw how to create objects using the “new” keyword, which is used for the instantiation of objects, and this also is demonstrated in the example above.
Recommended Articles
We hope that this EDUCBA information on “TypeScript class” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
