TypeScript: JavaScript like Programming Language by Microsoft
Okay,
here is a great news, Microsoft has released a developer preview of
TypeScript, a new programming language like JavaScript that is translated into
JavaScript so that its apps can be run in any browser. In other words, TypeScript
is a superset of JavaScript and you write it like you write JavaScript. And
today, I explored it and I am sharing it with you.
TypeScript is a language for application-scale JavaScript. TypeScript adds optional types, classes, and modules to JavaScript. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to clean, readable, standards-based JavaScript.
Step 4: Coding on Web Page
In above image, I opened the ‘Command Prompt’ and navigated (2) to website root location where greeter.ts file (1) exist and then executed the command (2) ‘tsc greeter.ts’ to produce JavaScript file that is ‘greeter.js’ (4).
TypeScript is a language for application-scale JavaScript. TypeScript adds optional types, classes, and modules to JavaScript. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to clean, readable, standards-based JavaScript.
TypeScript
has a syntax that is very similar to JavaScript but adds features, such as
optional static typing, that Microsoft programming language guru Anders
Hejlsberg says will make it easier for developers to build larger applications.
Hejlsberg
created Turbo Pascal, was the chief architect of Delphi, and is the lead
architect of C# and LINQ. He developed TypeScript with Steve Lucco and Luke
Hoban.
Here's
a list of features:
- Optional static typing
- Class declarations
- Support for modules
- A Visual Studio plugin
- It's Open Source and under the Apache 2.0 license
- You can install the tools easily with 'npm install -g typescript'
- You can play with it online at "http://www.typescriptlang.org/Playground"
Step 1: Get TypeScript tools
There
are two main ways to get the TypeScript tools:
- Via Node.js package manager (npm) or
- By installing the TypeScript for Visual Studio 2012 plugin (Download it from here)
Note1:
Close Visual Studio 2012, MS Word, SQL Server VSS Writer, Windows Explorer
before installing plugin. I realized, there is some bug with the installer, after
closing every normal process it will force you to close something but actually
nothing opened.
Note2:
At the end of installation, system will reboot.
Step 2: Screens of TypeScript
Installer
Step 3: Create a new Web Site
Create a new website in Visual Studio from File > New > Web Site. Now we will have a new project, add a new web page (.html or .aspx).
Step 4: Coding on Web Page
I
added a greeter.ts (similar to greeter.js file) file and typed following
TypeScript codes. Why .ts extension, it is because Microsoft recommended to use
.ts extension for this new language.
function greeter(string) {
return "Hello, " +
person;
}
var user = "Abhimanyu K Vatsa";
document.body.innerHTML = greeter(user);
And
the HTML markup is:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src='greeter.ts'></script>
</div>
</form>
</body>
</html>
If
you know JavaScript you will not face any difficulty understand the preceding code.
I used a .ts extension, but this code is just JavaScript. You could have
copy/pasted this straight out of an existing JavaScript app. Now, run the
application and you will see ‘Hello, Abhimanyu K Vatsa’ on the web page. Very
simple.
Note:
In above example, if you use .js extension then it will work fine because the code is just
JavaScript nothing else. But when you actually use TypeScript codes, you have
to have .ts extension, otherwise you will see errors.
Step 5: Compiling .ts file to produce
.js
Let’s
have another example which will use TypeScript codes.
i)
Create an .html page with following markup.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src='greeter.js'></script>
</div>
</form>
</body>
</html>
ii)
Add a greeter.ts file in the project with following codes.
class Student {
fullname : string;
constructor(public firstname, public middleinitial, public lastname) {
this.fullname = firstname + " " + middleinitial + " " + lastname;
}
}
interface Person {
firstname: string;
lastname: string;
}
function greeter(person : Person) {
return "Hello, " +
person.firstname + " " + person.lastname;
}
var user = new Student("Abhimanyu", "K", "Vatsa");
document.body.innerHTML = greeter(user);
Here
we create a Student class with a constructor and a few public fields. Notice
that classes and interfaces play well together, letting the programmer decide
what is the right level of abstraction.
For
now, I have an html page and a greeter.ts page. If you run your project now,
you will not see any output because I used greeter.js reference in my .html
file. So, we need to compile greeter.ts file to produce greeter.js file and
this compulsory, because browser only understands JavaScript not TypeScript. Find
the image below and follow the numbering to generate the JavaScript file.
In above image, I opened the ‘Command Prompt’ and navigated (2) to website root location where greeter.ts file (1) exist and then executed the command (2) ‘tsc greeter.ts’ to produce JavaScript file that is ‘greeter.js’ (4).
Now,
we all set to run the project, run it and explore it yourself.
Note:
Hopefully, Microsoft will enhance this to make auto compilation in Visual
Studio IDE in future.
Here is a image that shows, how TypeScript works (cycle):-
TypeScript gets translated into JavaScript and then browser starts acting it.
Anders Hejlsberg: Introducing TypeScript
Anders Hejlsberg: Introducing TypeScript
Abhi, why I use TypeScript??
ReplyDeleteType script try free HTML?
Deletewhy Microsoft trying to change the existing system by adding a new layer.
ReplyDeletePlease clarify what is Optional static typing?
ReplyDeleteStatic Typing is something that provides the feature like tracing errors at development time (coding time). Assume when you type any JavaScript code and made any mistake, can you see the instant error (like a red underline or like we get in C#/VB) at development time, off-course not. So, TypeScript has all that features, for more watch the embedded video in the article.
DeleteHey Abhi, What is the use of this? Anyhow its working with JavaScript extension and the code is same. Why they are adding a new layer. It will take time to convert. And also increase the time to run the project.
ReplyDelete@Anonymous: TypeScript is answer to developers who actually like JS's dynamic, functional, prototypal nature. It helps developers to write better, maintainable, application-scale JavaScript at development time.
Delete@Amit Kant: What if Microsoft will enhance Visual Studio IDE feature so that TypeScript automatically compiles into JavaScript? TypeScript is only for those developers who wanted to write better, maintainable and application-scale JavaScript.
Thanks for the article.
ReplyDeleteI wanted to thank you for this great read!! I definitely enjoying every little bit of it I best blog engine for programmers
ReplyDelete