Import jQuery and other 3rd Party Libraries into TypeScript as modules using AMD

Question

Question: Is there a way to import jquery into a TypeScript module using the AMD support (via the compiler) so it includes jquery as a dependency?

The key is to get the import statement, which makes the module a dependency in the define statement (see below).

define(["require", "exports", 'dataservice', 'jquery', 'knockout'], 
    function(require, exports, __ds__, $ , ko) { 
         ...
    }
)

Details: I want to import jquery (and other 3rd party libraries) as a TypeScript modules with AMD. The goal is to make them appears as a dependency in the require list. However, the only way to make TypeScript to do this appears to be to have an import statement. And to have an import you need a module to import. But ... there is no jquery module to point to. to.

Workarounds:

I can refer to the .d.ts and preload jquery in the main.js for require.js, but that means preloading all 3rd party libraries. Not terrible, but not ideal either as it doesnt take advantage of what we can already do with JavaScript and AMD.
I can create a module for each 3rd party library and wrap it, but then I get something like $.$. Which is even worse, IMO (and Irisk writing the wrong module code for each of these and getting out of synch).

So for now I am just preloading jquery in the main.js. but again, but this is less than ideal. Would have to do that for any library like knockout, backbone, etc that has no module.

Any better suggestions or something I am missing?

Update/Clarification:

I can also use shims in the config for dependencies amongst the libraries. But this still preloads the 3rd party ones. Example:

require.config({
    baseUrl: '../',
    paths: {
        'jquery': 'lib/jquery-1.7.2',
        'underscore': 'lib/underscore'
    }, 
    shim: {
        jquery: {
            exports: '$'
        },
        underscore: {
            exports: '_'
        }
    }
});

For what it's worth, I'm just loading them all in the main.js (or my equivalent thereof). It's kind of ugly, but it works. — Ken Smith
Ken - Yeah, that's basically what I am doing with 3rd party ones by pre-loading them. Just feels dirty when we know we can do it better in JavaScript. — John Papa
Agreed. The module system in TS still seems a little raw - kinda like the rest of the language :-). Hopefully improvements are coming. — Ken Smith
I hope and believe they are. It is alpha, so I'm fine with that. But if there is a better way today, I'd love to see it. — John Papa
@JohnPapa it's been a while since this was asked. Has there been any progress on this issue? Not being able to import non TypeScript modules seems like a massive oversight. — Brett Postin

Fenton Fenton · Accepted Answer · 2012-12-30T13:01:17

One other work around would be use a type definition for requirejs and use your own require statements, rather than an import statement.

The downside to this is that the TypeScript import can be used with AMD or CommonJS with just a compiler change, so you would be marrying requirejs in your program more than you would be with an import.

There is an existing definition for requirejs on Definitely Typed.

Import jQuery and other 3rd Party Libraries into TypeScript as modules using AMD

1 Answers