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



No comments:

Post a Comment