TypeScript Class - Syntax & Examples

[Pages:6]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 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.

TypeScript

TypeScript Tutorial TypeScript Variables TypeScript if TypeScript if-else TypeScript Switch TypeScript For Loop TypeScript While Loop TypeScript Do-While Loop TypeScript Arrays TypeScript Tuples TypeScript Unions TypeScript Functions TypeScript Anonymous Functions

TypeScript Object Oriented Concepts

TypeScript Class TypeScript Inheritance TypeScript Method Overriding TypeScript Interface

TypeScript String Operations

TypeScript String Length TypeScript String Split

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download