TypeScript With JQuery

JQuery is one of the most popular JavaScript libraries which exposes a lot of usable APIs for  JavaScript developers. It’s an integration with Typescript that may do wonders for you.

I am taking my previous code sample for the demonstration.

In my previous sample, I displayed a message in the alert box, but in this sample, I will display a message in the UI with the help of JQuery functions.

How to integrate with Typescript

  • Open project in Visual Studio.

  • Right click “TypescriptDemo” project and go to Nuget package manager.

  • Type “definitely” in a search box.

    definitely

You will see the list of libraries; which have an extension as “*.d.ts” and is called ‘DefinitelyTyped”, which are specific to Typescript projects.

For our sample, we will select “jquery.TypeScript.DefinitelyTyped” and install.

This will add a jQuery version of Typescript with an extension same as of Typescript files.

install

Drag and drop this “jquery.d.ts” file on the “demo.ts” file. This will add a reference to the JQuery library. Now, you are ready to use all the API’s of jQuery in your Typescript files.

code

Open “demo.ts” and make changes in “Play” function, as shown below:
function

You can see that we are able to find all relevant “JQuery” functions in the intellisense.

Below is the complete code of “demo.ts” file.

code

Note

While adding, click event to the button; I used lambda declaration ( ()=> ) instead of writing “function” and this is awesome.

In index.html file, add a ‘div’, ‘button’ and a ‘textbox’.

add

Now, browse “index.html” and open console, you will see the error, as shown below:

error

This is because we have not added “jQuery.js” file in our HTML page.

Let’s add the jQuery from Nuget package manager and add a reference in “index.html”.

reference

Now, it is ready to browse “Index.html” and see the output.

I have added the source code for the reference.