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:

Read more

Error: Variable ‘$’ must be of type ‘cssSelectorHelper’

If you just installed the jQuery TypeScript definition file then will get the above error when you run your application. Here is the error message in full:

Error: typings/globals/jquery/index.d.ts(3218,13): error TS2403: 
Subsequent variable declarations must have the same type.  
Variable '$' must be of type 'cssSelectorHelper', but here has type 'JQueryStatic'.

Read more

Installing Moment JS with Typescript and JSPM

Installing Moment JS with Typescript and JSPM is documented on the web, but none of this actually works with the latest version of Aurelia. In this blog post I’ll show you the steps to get Moment working with Aurelia using Typescript and JSPM, and I’ll show you why it doesn’t work the way other websites say to do it. Disclaimer: Aurelia has announced that they are still doing a lot of work on their framework for TypeScript so things may magically start working once they get things sorted out and have an official v.1 release. But until that time, read on to see how to make it work today.

Read more