typescript step by step with suitable examples(Part 3)

abubakarsiddiq (25)in #programming • 7 years ago

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.

Loops in TypeScript.
Functions in TypeScript.
Interfaces in TypeScript.
Classes in TypeScript.

learn typescript step by step from very basic level to advance level.

Let’s start working with typescript step by step using with suitable examples.

Loops in TypeScript

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.

Create a new TypeScript file.
When you hover the mouse over the folder in VS Code Editor, then you will see some icons. Just click on the “New File” icon => Enter the name of the file with .ts extension (E.g. typescriptLoops.ts). It will create a new file in your project and you will see it in the left pane of VS Code Editor.

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);

Create .js file.
We have added typescript file with the name “typescriptLoops.ts”. Now we need to convert .ts file code into .js. Go to View in VS Code Editor => choose “Integrated Terminal”.it will open a new window => write “tsc typescriptLoops.ts” into window => then press enter. It will create a new file with the name typescriptLoops.js.

Note: – if you don’t know why we converted, then go to the previous tutorial or click here.

Create HTML file.
Click on “New File” icon => enter the name with the extension of .html (E.g. Index.html).

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>

Run your project
Right click on Index.html file => choose “Copy Path” => open any browser => paste the copied path into address bar => then press enter.

Functions in TypeScript.

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.

Interface in TypeScript

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 in TypeScript

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.

Constructors in TypeScript

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.

#utopian-io #steemstem #typescript #steemdev