TypeScript & JQuery

Today, TypeScript announced a major upgrade. Before you can try it in your visual studio with JQuery, you should do few housekeeping task.

Download Typescript from here .

To have JQuery work with TypeScript, you need DefinitelyTyped. A TypeScript declaration file is way of defining the types, functions and parameters in an external third-party JavaScript library. By using a declaration file in your TypeScript code will enable Intellisense and type checking against the external library you are using.

Open the visual Studio, Choose a Web Project. Afterwards click on Tools.

Tools -> Library Package Manager (VS 2012 SP2) -> Manage NuGet Packages for solution.

Type “definitely” in the search box to get the jquery.TypeScript.DefinitelyTyped

untitled

Now, Download web essentials 2012 from here.

Web essentials help you see your TypeScript and Java Script file side by side. You can type your typeScript in .ts file, and when you save the file visual studio will create a java script file for you.

Now you can see “Type Script” and java script side by side, and appreciate the beauty of “TypeScript”

untitled2

So happy to be out of  var fn = (fun() { …..})() jail of curly and straight braces. How simple and clean TypeScript looks.

For the completeness sake, here is my Html file calling this script

<script src="Scripts/jquery-2.0.2.min.js"></script>

<script src="Scripts/main.js"></script>

<div>

<p id="demo">This line will change</p>

<button type="button" onclick="CheckTypeScript('wow')">Click me</button>

</div>

main.ts

/// <reference path=".\typings\jquery\jquery.d.ts" />

function CheckTypeScript(wow) {
    var greeter = new Greeter<string>(wow);
    $("#demo")[0].innerHTML = greeter.greet ();
}

class Greeter<T> {
    greeting: T;
    constructor(message: T) {
        this.greeting = message;
    }
    greet() {
        return this.greeting;
    }
}
Advertisements

One thought on “TypeScript & JQuery

  1. Pingback: TypeScript to end your woes of prototype | Tech Crumb - collected along the way ....

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s