What Is TypeScript?

Amit Kumar
7y
13.3k
0
7

Article

In this article, we will learn what TypeScript is and how to install and use it with a simple application. It is my first TypeScript Application.

TypeScript Introduction

TypeScript

TypeScript is a strongly-typed superset of JavaScript, which means it adds some syntactical benefits to the language while still letting you write normal JavaScript if you want to. It encourages software developers to more declarative style of programming like interfaces and static typing, offers modules and classes, and most importantly, integrates relatively well with popular JavaScript libraries and code. It totally follows the OOPS concept.

Or we can say TypeScript is a transpiler. Many software developers will get very confused about Transpiler. It may be compiler but actually it is a tranaspiler. If you do not know about transpiler, then learn ahead.

Transpiler

It converts one language into another language.

How to install it

There are two main ways to install the TypeScript tools:

Via npm (Node.js Package Manager)
By installing, TypeScript via Visual Studio

I have installed via Visual Studio because I love Microsoft. For downloading it, go to Mircrosoft official website or the given below url which is shown in the screenshot and download it.

typescript

After downlaod, right click and select "Run as Admininstrator".

typescript

After that, click Next; and finally it installs.

How it works

TypeScript is modern JavaScript. In JavaScript, we declare any variable like following.

var selectedValue=" ";

but in TypeScript, the declaration is done like the following.

Syntax

AccessModifier Property/Variable Name Colon(:) dataType

For example -

Public StudentName : string = "";

Let us understand this with examples.

Open Visual Studio.

Select Project >> Asp.Net Web Application and write application name.

Select Empty template and click OK.

After this, we will add new TypeScript file, as shown in the below image.

After clicking on TypeScript file, give TypeScript file a name, such as Student.

The following dialog box will open. It means our application is not fully configured for supporting TypeScript. So, for full support, click on Yes.

Now, our application has configured full support for TypeScript. In the Solution Explorer, you can see that student.ts file is added. One more thing; when we create JavaScript file, its extension is .js but in TypeScript file, the extension is .ts.

And you can see in my application now that one file is available under the name Student.ts

I have created a Student class and added StudentName property. After creating this property, when we save this file (Student.ts), the JS file with same class name is generated.

TypeScript file (Student.ts) code is as follows.

class Student {
public StudentName: string = " ";
}

After clicking "Show All files", we can see the screen like this.

Now, let's see the JavaScript code which is auto generated after saving the TypeScript file.

var Student = (function() {
function Student() {
this.StudentName = "";
}
return Student;
}());

For using this code, let's create a new web page named Student.aspx.

typescript

Click New Item >> web form, give a suitable name and click Add.

Now, the Web Form is created. Add reference of Sudent.js file in Web Form and use it.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Student.aspx.cs" Inherits="LearnTypeScript.Student" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<script src="Student.js"></script>
<body>
<script>
var stud = new Student();
stud.StundentName = "Amit";
alert(stud.StundentName);
</script>
</body>
</html>

Code Explanation

We have added reference of Student.js file and created an object of Student class and set the property name. Then, we have shown the alert message.

Result

Now, I want to change something in my code. I have created a function in student.ts file and called it from student.aspx page.

class Student {
public StudentName: string = "";
//Create a function
validate(): boolean {
alert("Amit Text function");
return;
};
}

And used it from Student.aspx file.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Student.aspx.cs" Inherits="LearnTypeScript.Student" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<script src="Student.js"></script>
<body>
<script>
var stud = new Student();
stud.StundentName = "Amit";
alert(stud.StundentName);
alert(stud.validate());
</script>
</body>
</html>

Output

typescript

TypeScript

Up Next

Ebook Download

View all

Test

Read by 16 people

Download Now!

Learn

View all