Typescript can't find name '$' after jquery import?

Question

I use TypeScript 1.4.1 and lay out the project like this:

scripts/ libs/ jquery/ jquery.d.ts // Latest from DefinitelyTyped jquery.js // 2.1.3 lodash/ lodash.d.ts // Latest from DefinitelyTyped lodash.js // 3.3.1 main/ test.ts 

My main / test.ts contains the following:

 /// <reference path="../libs/lodash/lodash.d.ts" /> /// <reference path="../libs/jquery/jquery.d.ts" /> import _ = require("lodash"); import $ = require("jquery"); function requireExistingElement($el: $.JQuery) { if(_.isUndefined($el) || _.isNull($el) || $el.length === 0) { throw new Error("It appears the requested element does not exist?"); } } requireExistingElement($("body")); 

This is compiled with the following command:

 tsc --module amd scripts/main/test.ts 

I expect this to work correctly, but when I compile it, I get:

 scripts/main/test.ts(7,38): error TS2304: Cannot find name '$'. scripts/main/test.ts(13,24): error TS2304: Cannot find name '$'. 

My question is: how can I refer to jquery, given that the above does not work? Or am I just doing something wrong?

Answer 1

change ($el: $.JQuery) to ($el: JQuery)

$ is a variable, so it cannot be used in type annotation. JQuery is an interface, so it can be used in type annotations.