Developers

Monday 2 June 2014

Integration of Jquery with TypeScript

Introduction

Here today we are focusing on integration of Jquery with TypeScript. If you are new to TypeScript and don't know much about TypeScript please visit my previous Article "What is TypeScript".

For the demo and implementaion we are using Visual Studio 2012.

Step 1: Create New Project

Create New Project

Step 2:

Default Template for TypeScript Application

Step 3 : Right Click on Solution Explorer and choose Manage NuGet Packages then on the top right textbox search for "jquery.TypeScript.DefinitelyTyped" and install it and same process for Jquery and also install it.

Step 4: Click Close Button after installation.

We have installed jquery and jquery.definatelytyped file.

Here we have jquery deinately type file and also jquery in the solution explorer. Now we are ready to write jquery code in .ts file. we must require definately typed file for jquery integration as typescript has no knowledge about jquery syntax.

Step 5:

We have included reference for definately typed jquery in the app.ts file. This reference is required for jquery syntax in definately typed file. As we know Typescript is a superset of Javascript and it has only knowledge about Javascript and all other scripts or libraries are third party for it.

Now we are ready with integration of Jquery in TypeScript.

Step 6 : Run to see output

Source code for the demo

1) app.ts

/// <reference path="Scripts/typings/jquery/jquery.d.ts" />
function HelloWorld()
{
    return "Hello TypeScript!!!"
}
$(function() {
    $('#content').html(HelloWorld());
});

2) app.js (compiled typescript file)

/// <reference path="Scripts/typings/jquery/jquery.d.ts" />
function HelloWorld() {
    return "Hello TypeScript!!!";
}
$(function () {
    $('#content').html(HelloWorld());
});
//# sourceMappingURL=app.js.map

3) Index.html

<!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="Scripts/jquery-2.1.1.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>
 
    <div id="content"></div>
</body>
</html>

Download Source Code

Happy Coding!!!.....

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...

Tuesday 7 May 2013

Windows Communication Foundation(WCF)

Windows Communication Foundation(WCF) which is initially the part of the .Net Framework 3.0 and then continuously Framework 3.5,4.0 and now it is also the part of .Net Framework 4.5. It is unified Microsoft's programming model for building service oriented applications.It enables developers to build secure, reliable, transacted solutions that integrate across platforms and interoperate with existing technology.

A lot of Theory has been written on the MSDN http://msdn.microsoft.com/en-us/library/ms731082.aspx related to WCF but here in this blog I ~~am not going to write down the theory and all~~..I will try to more focus on practical approach using WCF.