Introduction

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

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.