Adding jQuery and jQueryUI to your TypeScript project

Installing jQuery

jQuery is already installed within the Aurelia skeleton project. For example, we can download a fresh copy of ‘skeleton-typescript’ and add the following method to the welcome.ts file:

attached(){
  alert($('#fn').val());
}

When you load the welcome page it will display an alert showing the value in the First Name input field. This works out of the box.

There is a small problem though. In your editor the .val() function will have a red squiggle under it b/c you haven’t loaded the TypeScript definition file yet. Your editor, assuming it’s a TS aware editor like Visual Studio Code, doesn’t recognize the .val() function and gives you an error. So we need to add the .d.ts file to our project:

typings install dt~jquery --global --save

This finds and installs a global copy of the jquery’s .d.ts file in your project as well as updates the typings.json and other files so that you have a permanent reference to .d.ts file. Note: the code uses the curvy tilda character, ~, and not a straight dash, -. This can be hard to notice on a webpage if you haven’t done it before.

Lastly, reference the TS file in your source code. At the top of the welcome.ts page add:

import * as $ from jQuery

Your TS aware editor should now recognize that .val() is a valid jQuery function and your code will run fine as it did before.

Note: As of this writing the jQuery TypeScript definition conflicts with Aurelia’s reference to the Angular-Protractor library. I discuss this and how to fix it here: Angular Protractor error. See that post if you are getting errors when running your site after adding the jQuery .d.ts files. This has been fixed in Protractor 4.0 and hopefully skeleton-typescript will be updated to reference the most recent library.

Installing jQueryUI

Before we look at how to use Jspm and Typings to install jQuery, let’s first get the css files installed.

Go to the jqueryui.com site and download the library and theme you want to use. Copy the .css files to the styles folder in your project. Also copy the entire images folder into that same folder. Lastly, reference those files in your project. You can either reference them from the specific webpage you are working on or in the index.html page so that it’s available to all pages by default. Here is the code you need:

< link rel="stylesheet" href="styles/jquery-ui.css">
< link rel="stylesheet" href="styles/jquery-ui.theme.css">

Now we’re ready to install the jQuery packages. Note: You could choose to use a CDN like Google to host your jQueryUI files and this will work fine. The only problem is that these files don’t have a .d.ts file and your editor will show errors for all jQueryUI specific functions. Your code will still work during runtime, it’s just a matter of whether you are calling a lot of these functions and if you don’t mind seeing the red squiggly line in your code.

To install jQueryUI, run the following commands:

jspm install jquery-ui
typings install dt~jqueryui --global --save

Lastly, go into your webpage’s .ts file and update the header to have the following code:

import * as $ from 'jquery';
import 'jquery-ui';

Notice that the jQueryUI import statement is much simpler. This is because it doesn’t have any external definitions defined in it.

To use the jQueryUI functions in your code, or any jQuery functionality, you need to put it in the attached() function. This is called by Aurelia after the DOM has been created and you can get a reference to the page objects using standard jQuery selectors. For example, if add a title attribute to the First Name input field then you can display it in a tooltip using the following code:

attached(){
  $('#fn').tooltip();
}

That’s it for getting jQueryUI installed in your Aurelia TypeScript project.

Note: If you’re like me, the biggest reason for using jQueryUI is for the datepicker widget. I found an excellent example of how to use the datepicker in your Aurelia app here: Aurelia Datepicker and the associated blog post: datepicker post. You have to tweak it slightly (e.g. change the filename from datepicker.js to datepicker.ts), but otherwise it works great.