Saturday, 31 May 2014

TypeScript

What is TypeScript?

TypeScript is a typed superset of Javascript. It provides a manageable OOP way to write code with Javascript.  It has OOP concepts that provides a simple way to write code at client end.

Significance

Javascript was designed to provide actions on browser and never intended to work on large scale applications and now a days people are writing thousands or millions of lines in a single large application and JavaScript doesnot have such type of great features to help a large scale application like classes, modules,inheritence,generics therefore writing code for large scale application is hard and this is first target Typescript is following. It provides a way to write your client end code in more effective and scalable way.

All Browsers and All Platforms Support
It supports all browsers and all platforms and the most important thing that it is open source and source code can be found at codeplex https://typescript.codeplex.com/SourceControl/latest


 Download and Installation for Visual Studio 2012

http://www.microsoft.com/en-in/download/details.aspx?id=34790 ‪ After downloading plugin from this link install it and it will create a template in the Visual Studio

Template
TypeScript Template
Misconception:TypeScript is intended for Visual Studio 2012/2013 or it can run only with .Net framework 4/4.5/4.5.1.

Fact: TypeScript is open source and there is no relation with any editor or .Net framework and can run with any framework or technology and with any development editor.

Implementation and First Demo in TypeScript using Visual Studio 2012


Step 1
TypeScript Template
Step 2

After clicking on OK button we will have a already designed template in TypeScript like this below screen.
Built In Template By Visual Studio 2012 for TypeScript
For the sake of clearity and simplicity, we will delete all template code and try to write our own code in minimum lines for better readablity. I am going to write a simple program to display "Hello TypeScript!!!" in place of this template.

TypeScript, JavaScript and HTML Markup
Step 3

When you will run this application you will see Hello TypeScript on the Browser.

TypeScript File Source Code
 
function HelloWorld()
{
    return "Hello TypeScript!!!"
}
window.onload = () => {
    var el = document.getElementById('content');
    el.innerHTML = HelloWorld();
};
 
Javascript Source Code:
 
function HelloWorld() {
    return "Hello TypeScript!!!";
}
window.onload = function () {
    var el = document.getElementById('content');
    el.innerHTML = HelloWorld();
};
//# sourceMappingURL=app.js.map
 
Index.html Source Code
 
<!DOCTYPE html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>
 
    <div id="content"></div>
</body>
</html>
 
 
I will explore more in depth about TypeScript in my next Articles on TypeScript.

Happy Coding...

Posted by at

1 comment:

Subscribe to: Post Comments (Atom)