TypeScript With JQuery

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

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


Similar Articles