Post
Ask Question

What is TypeScript?: Why it Matters, and How it's Transforming Web Development

TypeScript

 
TypeScript is a strongly-typed superset of JavaScript. TypeScript adds static types to JavaScript. TypeScript makes JavaScript complete programming languages and adds strongly type declarative structure to JavaScript programming. TypeScript uses JavaScript and C# syntaxes and complies with native JavaScript. Today, TypeScript is being used to build large open-source projects such as Angular.
 
TypeScript was developed by Microsoft for the developers who want to build scalable applications in JavaScript and bring their knowledge and experience of structured and modern programming languages such as C# and C++. A C# developer can use classes, types, objects, their properties and methods and without too much worry about JavaScript syntaxes.
 
TypeScript uses a transcompiler or transpiler, a source-to-source compiler that translates one language into another language. TypeScript transpiler converts TypeScript code into JavaScript code. 
 
Here are the key features of TypeScript.
  1. TypeScript developed Microsoft, is an open-source programming language that adds types to JavaScript. TypeScript runs on any platform, any device, and in any browser. TypeScript source code and project is available on github.
  2. TypeScript adds optional types, classes, and modules to JavaScript.
  3. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS.
  4. TypeScript is compiled to clean, readable, standards-based JavaScript.
  5. TypeScript extends JavaScript syntax, so any existing JavaScript programs work with TypeScript without any changes.
  6. TypeScript is designed for the development of large applications and when compiled it produces JavaScript to ensure compatibility.
  7. The command-line TypeScript compiler can be installed as a Node.js package. 
  8. TypeScript is supported by most of the popular developer IDEs including Visual Studio, Visual Studio Code, Sublime Text, Atom, Eclipse, Emacs, WebStorm, and Vim. 

What are the benefits of TypeScript

 
Here are some of the key benefits of TypeScript. 
  • JavaScript is not for every developer. Developers coming from non Web and scripting background are not too fond of JavaScript. For example, a Windows developer who is used to developing applications for years using C++ and C# may not find JavaScript a friendly language. However, JavaScript is used everywhere.  
  • TypeScript gives non Web developers an edge to build Web applications using C# and JavaScript. The final output of TypeScript is pure JavaScript.  
  • TypeScript provides classes, types, modules, inheritance, properties, and methods that are known to object-oriented programmers.  
  • TypeScript helps organizes large projects into modules and helps developers create large scale JavaScript-based applications. 

How to install it

 
There are two main ways to install TypeScript tools: 
 
1. Via npm (Node.js Package Manager) command-line tool
 
  1. npm install -g typescript  
2. By installing TypeScript via Visual Studio. 
 
If you use Visual Studio or VS Code IDE, simplest way for you to add to Visual Studio or VS Code is to search and add package or download from the TypeScript website. 
 
You can also download TypeScript Tools for Visual Studio. If you search in Google, you will find the latest version of the download. Here is one download for VS 2017. 
 
 
I have installed it via Visual Studio. I installed it on VS 2012. For you, this will look different if you're installing the latest version of TS for newer VS.
 
typescript
 
After download, right-click and select "Run as Administrator".
  
typescript
 
After that, click Next; and finally it installs.
 
How it works
 
TypeScript is modern JavaScript. In JavaScript, we declare any variable like the 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's create a project and understand this by building a simple application.
 
Open Visual Studio.
 
typescript 
 
Select Project >> Asp.Net Web Application and write application name.
 
typescript
 
Select the Empty template and click OK.
 
typescript 
 
After this, we will add a new TypeScript file, as shown in the below image.
 
typescript
 
 
After clicking on the 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.
  
 typescript
 
Now, our application has configured and had 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
 
typescript
 
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 the same class name is generated.
 
typescript
 
TypeScript file (Student.ts) code is as follows.
 
  1. class Student {  
  2.  public StudentName: string = " ";  
  3. }  
After clicking "Show All files", we can see the screen like this.
 
typescript
 
Now, let's see the JavaScript code which is auto-generated after saving the TypeScript file. 
 
  1. var Student = (function() {  
  2.  function Student() {  
  3.   this.StudentName = "";  
  4.  }  
  5.  return Student;  
  6. }());   
 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.
 
typescript
 
Now, the Web Form is created. Add reference to Sudent.js file in Web Form and use it. 
 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Student.aspx.cs" Inherits="LearnTypeScript.Student" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="https://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.     </head>  
  8.     <script src="Student.js"></script>  
  9.     <body>  
  10.         <script>    
  11.             var stud = new Student();    
  12.             stud.StundentName = "Amit";    
  13.             alert(stud.StundentName);    
  14.         </script>  
  15.     </body>  
  16. </html>      
Code Explanation
 
We have added a reference to the Student.js file and created an object of the Student class and set the property name. Then, we have shown the alert message.
 
Result
 
typescript
 
Now, I want to change something in my code. I have created a function in the student.ts file and called it from the student.aspx page.
 
  1. class Student {  
  2.  public StudentName: string = "";  
  3.  validate(): boolean {  
  4.   alert("Amit Text function");  
  5.   return;  
  6.  };  
  7. }   
And used it from Student.aspx file.
 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Student.aspx.cs" Inherits="LearnTypeScript.Student" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="https://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.     </head>  
  8.     <script src="Student.js"></script>  
  9.     <body>  
  10.         <script>    
  11.             var stud = new Student();    
  12.             stud.StundentName = "Amit";    
  13.             alert(stud.StundentName);    
  14.             alert(stud.validate());    
  15.         </script>  
  16.     </body>  
  17. </html>     
Output
 
typescript
 
typescript
 
Summary
 
In this article, we learned about TypeScript and why it was developed. We also learned the benefits of TypeScript. 
 
Here is the next article on QuickStart with TypeScript and 100s of articles and tutorials, TypeScript on C# Corner.


Similar Articles