In the previous two tutorials, I have discussed lot of topics such as “what is TypeScript”, “What are the basic features of TypeScript”, “Why we use TypeScript”, “how to setup TypeScript development environment”, “Types in TypeScript”, “Variables in TypeScript”, and “Decision-Making Statements in TypeScript”. If you are new to TypeScript then you must go to previous tutorials and learn how to setup TypeScript development environment and learn also the basics of TypeScript.
But now in this tutorial, you will learn something more in TypeScript. Topics that you will learn are listed below.
Let’s start working with typescript step by step using with suitable examples.
Here I am not going to discuss what are loops and how loops work. I assume you are familiar with Loops and how loops work. There are three types of loops in TypeScript such as for loop, while loop, and do…while loop.
Let’s start how to work with loops in TypeScript.
Note: – In this tutorial, I will use the previous project which we have created in the previous tutorial. If you don’t know how to setup TypeScript development environment then click here. And also if you don’t know how to create a project folder then click here.
Write Code
Write below codes one by one.
For Loop
var num:number = 5;
var i:number;
var factorial = 1;
for (i = num; i>= 1; i++)
{
factorial *= 1;
}
alert("Factorial Is : " + factorial);
Note:- Now move to 3 step. After getting a result, get back here and write the below while loop code instead of for loop code. Do same for each loop.
while Loop:
var num:number = 6;
var factorial:number = 1;
while(num >=1) {
factorial = factorial * num;
num--;
}
alert("Factorial is "+factorial);
do-while loop:
var num:number = 20;
do {
console.log(num);
num--;
} while(num>=0);
Note: – if you don’t know why we converted, then go to the previous tutorial or click here.
Now add the below code. In this code, I have added typescriptLoops.js file reference.
<html>
<head>
<title>TypeScript Decision Making Statements</title>
<script src="./typescriptLoops.js"></script>
<body>
<h1> Decision Making Statements </h1>
</body>
</head>
</html>
Functions are same in TypeScript as in other languages. If you know C# or Java or any other then you must know about functions. Let’s start how to work with function in TypeScript.
function sum(num1:number,num2:number){
return num1 + num2;
}
alert(sum(5,10));
write the above function code in typescript file.
Note: – Just do all the steps as we did in previous part (Loops in TypeScript).
Here in this code’s first line, I created a function with the name of “sum” and added two parameters(num1, num2). Then just simply add two numbers and return the value. And then in the last line, I am calling “sum” function with two number values.
The simplest definition of Interface is “the syntactical contract that an entity should conform to”. Interface define the properties, methods, and events which are the members of the interface. It contains only the declaration of the members. It provides a standard structure that the derived class would follow.
Let’s see and understand with a simple example.
interface IStudent{
FirstName:string;
LastName:string;
RollNumber:number;
grade:string;
}
var std:IStudent = {
FirstName: "ABC",
LastName:"DEF",
RollNumber:1234,
grade:"A"
}
alert("First Name is :" + std.FirstName + ", Last Name is : "+std.LastName+", RollNo is :"+std.RollNumber+", Grade is :"+std.grade);
Note: – Just do all the steps as we did in previous part (Loops in TypeScript).
Here in this code, the first block of code defines an interface with some properties, and next block defines an object with properties values. Then in the last block, the alert will show all the properties with their values when you run your project.
Classes are the very important part of any object oriented language. TypeScript is also an object oriented language. If you know about some other Object Oriented languages, then you must familiar with classes and the importance of classes.
Let’s start how to work with classes in TypeScript.
//declaring a class
class student{
FirstName:string;
LastName:string;
RollNumber:number;
Grade:string;
//declaring a function
showStudent(){
alert("First Name is :" + this.FirstName + ", Last Name is : "+this.LastName+", RollNo is :"+this.RollNumber+", Grade is :"+this.Grade);
}
}
//declaring an object
var obj = new student();
obj.FirstName= "ABC";
obj.LastName= "DEF";
obj.RollNumber=1234;
obj.Grade="A";
obj.showStudent();
Note:- Just do all the steps as we did in previous part (Loops in TypeScript).
Here in this code, the first block of code defines a class student with four fields and one function “showStudent”. I used “this” keyword in function, this keyword refers to the current instance of the class. Function will show a message using alert box when we will run our project.
Then, I have created an instance of class with the name obj. Then I assigned values to fields and then last statement is calling the showStudent function.
A constructor is a special function of the classes that are responsible for initializing the variables of the classes. So, TypeScript provides this facility also. It defines a constructor using the constructor keyword. Constructor can be parameterized.
In previous part (Classes in TypeScript) code, you see we assigned values to the fileds after declaring an instance of the class. Now remove these four line of code and then run your project and see what happened. You will see an alert popup with undefined text message.
So, to overcome this problem we will use constructor in our code.
Let’s start how to use constructor in TypeScript.
//declaring a class
class student{
FirstName:string;
LastName:string;
RollNumber:number;
Grade:string;
//Constructor
constructor(firstName:string, lastName:string, rollNo:number, grade:string)
{
this.FirstName = firstName;
this.LastName = lastName;
this.RollNumber = rollNo;
this.Grade = grade;
}
//declaring a function
showStudent(){
alert("First Name is :" + this.FirstName + ", Last Name is : "+this.LastName+", RollNo is :"+this.RollNumber+", Grade is :"+this.Grade);
}
}
//declaring an object
var obj = new student("ABC", "DEF", 1234,"A");
//obj.FirstName= "ABC";
//obj.LastName= "DEF";
//obj.RollNumber=1234;
//obj.Grade="A";
obj.showStudent();
Note:- Just do all the steps as we did in previous part (Loops in TypeScript).
This code is very simple. I am using same code for constructor example as wrote in “classes in typescript” part. But I have added a constructor in this code.