typescript step by step with suitable examples (Part 2)

In the previous tutorial, I have discussed what is TypeScript, What are the basic features of TypeScript, and Why we use TypeScript. But now in this tutorial, I am going to show TypeScript in practically. First of all, I will show how to setup TypeScript Development Environment? And then I will cover some topics of TypeScript that are listed below with suitable examples.

• TypeScript Types.
• Variables in TypeScript.
• Decision-Making Statements in TypeScript.

learn typescript practically with suitable examples

Let’s start working with typescript with very easy and suitable examples. learn typescript from very basics to advance.

How to setup TypeScript Development Environment?

I will use Visual Studio Code Editor for this tutorial series due to some reason. First of all, it is a cross-platform editor. You can use it for Windows, Mac-OS, and Linux. The second one, If you are front-end developer and working with HTML, CSS, Jquery and etc, then you don’t need to install Visual Studio IDE which comes with the bulk of features.

Note: – You can use Visual Studio 2013 or up to the latest IDE for TypeScript.

Now, let’s see how to setup TypeScript development environment.

• Install Visual Studio Code Editor
  We need to install VS (Visual Studio) Code editor for typescript development. You can download VS Code Editor here (https://code.visualstudio.com/download ).

• Install Node.js
  Now, we need to install Node.js for installing TypeScript. Just go to this link(https://nodejs.org/en/download/) and download required Node.Js and then install it.

• Install TypeScript
  You can install the TypeScript using the node.js command prompt. Just write the below command in Node.Js command prompt.

npm install –g typescript

This is all that what you need to TypeScript development environment.

Types in TypeScript.

The Type System represents the different types of values that are supported by the language. The purpose of the type system is to check the validity of the supplied values before they are stored or manipulated by the program. The another purpose is to ensure that the code is behaving as expected.

TypeScript provides the data types as the part of its optional type system. There are three following three types.

• Any (data type)
  It is the super type of all the data types in TypeScripts.
• Built-in types
  String, Number, Boolean, Void, Null, Undefined are the built-in data types in TypeScript.
• User-defined types
  Enums, classes, interfaces, arrays, and tuple are the user defined data types.

How to declare variables in TypeScript?

The syntax for declaring a variable in TypeScript is to include a colon (:) followed by its type and after the variable name. We have four option to declare a variable in TypeScript.

• Var identifier : type-annotation = value ; (E.g. var name:string = “Hello”;)
• Var identifier : type-annotation ; (E.g. var name:string;)
• Var identifier = value ; (E.g. var name = “Hello”;)
• Var identifier ; (E.g. var name;)
  Let’s understand with example in TypeScripts. Now we need to create a new project in TypeScript. Just follow the following steps.
• Create a new Folder.
  First of all, we need to create a folder where we can save our project files.

Note: – you can save it in your computer directory where you want.

• Open Folder in Visual Studio Code Editor.
  Now in this step, we will open our created folder in VS Code Editor. Open you VS Code Editor => go to file => then choose “Open Folder…” option => select your newly created folder. And you can also get folder by just pressing (Ctrl + K Ctrl + O).

• Create TypeScript file.
  Go to folder which you have created in VS Code editor. When you hover on the folder name, then you will see some icons. Just click on “New File” icon => enter file name with the extension of ts (E.g. Variables.ts)

Now I will write some code of TypeScript to understand how to declare variables in TypeScript. Just copy the below code and put in TypeScript file.

var Name:string = "World";
var val:number= 200;
var val1:number= 2.5;
alert("Hello " + Name + ", val = " + val + ", val1 = " + val1);

• 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 variables.js file reference.

<html>
  <head>
    <title>TypeScript Variables</title>
    <script src="./variables.js"></script>
<body>
  <h1>Hello world</h1>
</body>
  </head>
</html>

But the question is, we have no variable.js file in our project. Then why we added the reference of that .js file. The answer is simple. There is no browser that supported to typescript file. So now we will convert our typescript file code into javascript using TypeScript transpiler. See below how to convert typescript file code into javascript.

Go to View in VS Code editor => Choose “Integrated Terminal” option(It will show a new window in VS Code Editor) => write the command “tsc variables.ts” => and press enter button.

Then you will see a new file with .js extension is added in your project directory.

Now run your index.html file. To do it, right click on Index.html file => choose “Copy Path” => then put the copied path into the browser’s address bar => then press enter.

Then you will see a popup. And it will show your variables values that you have created.

Congratulation..! you have created your first TypeScript project.

Decision Making statements in TypeScript.

In TypeScript, Decision-Making statements are same as in other languages. There are four types of decision-making statements in TypeScript. if statement, if…else statement, else….if and nested if statements, switch statement. Let’s see how to use Decision-Making statements in TypeScript.

Note: – I will use the previous project, that we have created in “How to declare variables in TypeScript?” part, to show examples of Decision-Making statements.

Just create a new file. Click on “New File” icon (when you hover the mouse over a folder in VS Code, then you will see some icons) => Enter a name with .ts extension (E.g. DecisionMakingPrac.ts).

• If statement.
  Write the below code into DecisionMakingPrac.ts file.Then convert the TypeScript code into javascript using TypeScript transpiler. If you don’t know how to do, then go to the previous part “How to declare variables in TypeScript ” and see how we did it and why we need to do it.

var num:number = 16;
if(num % 2 == 0)
{
alert("Even");
}

Now, add the reference of DecisionMakingPrac.js file into Index.html file.

<html>
  <head>
    <title>TypeScript Decision Making Statements</title>
    <script src="./DecisionMakingPrac.js"></script>
  <body>
     <h1> Decision Making Statements </h1>
  </body>
  </head>
</html>

Now simply run the index.html file and check the output.

• If…else statement.

var num:number = 16;
if(num % 2 == 0)
{
  alert("Even");
}
else
{
  alert("Odd");
}

• Else…if and nested if statement

var num:number = 2;
if(num > 0)
{
  alert( num +" : is positive ");
}
else if(num < 0 )
{
  alert(num + ": is negative");
}
else
{ 
  alert("Is neither positive nor negative");
}

• Swith statement

var grade:string = "A";
switch(grade)
{
case "A":
{
    alert("Excellent");
    break;
}
case "B":
{
    alert("Good");
    break;
}
case "C":
{
  alert("Fair");
  break;
}
default:
{
  alert("Invalid");
}
}