How to require jquery via AMD in TypeScript

Question

How do I require the jquery AMD module for my TypeScript module. For example let's say directory structure for scripts looks like this:


    jquery-1.8.2.js
    jquery.d.ts
    module.ts
    require.js

I want the generated js file from module.ts to require jquery-1.8.2.js be loaded via require.js.

Currently I have:


    import jquery = module('jquery')

This results in The name "jquery" does not exist in the current scope.

score 27 · Answer 1 · edited Jun 20 '20 at 09:12

27

FOR TYPESCRIPT 1.7+

It looks like standard is changing again, where the below 0.9+ method still works, but with ES6 coming the following module loading could be used. (reference: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105)

import * as $ from "jquery";

and even partial ones

import {extend} from "jquery";

(this still require the jquery.d.ts, if tsd is installed - tsd install jquery)

to install tsd: npm install tsd -g

FOR TYPESCRIPT 0.9+

/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');

//Do your stuff

And also, if your jquery.d.ts do not define a external module, add the following to jquery.d.ts:

declare module "jquery" {
    export = $;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 01 '13 at 20:04

Poul K. Sørensen

16,950
21
126
283

If i try that, i get errors: Unable to resolve external module ''jquery''. and Module cannot be aliased to a non-module type. – ghost23 Sep 06 '13 at 11:52
Sounds like you dont have the declare module "jquery" in jquery.d.ts. – Poul K. Sørensen Sep 07 '13 at 11:57
Found the issue, was something completely different: my jquery library is called "jquery-1.9.1" *facepalm* – ghost23 Sep 09 '13 at 11:53
For typescript 1.7+, do we still need `/// `? – zgosalvez Jan 06 '16 at 04:52
Depends on which IDE you use. The compiler must know about jquery.d.ts. if using TSD, the default is to have a tsd.d.ts that reference all your other typings and then tell the compiler about tsd.d.ts – Poul K. Sørensen Jan 06 '16 at 14:44
but how does RequireJs know where to find the jquery.js file? – Axel Nov 04 '16 at 17:11

Fenton · Answer 2 · 2013-01-26T13:50:01.137

I think a lot of the confusion around this is due to jQuery not really acting like an External Module, which inhibits the use of an import statement. The solution is quite clean, simple and elegant enough to not feel like a work-around.

I have written up a simple example of Using RequireJS and jQuery in TypeScript, which works as follows...

You grab the type definitions from Definitely Typed for RequireJS and jQuery.

You can now use raw RequireJS with static typing inside of the TypeScript file.

app.ts

///<reference path="require.d.ts" />
///<reference path="jquery.d.ts" />

require(['jquery'], function ($) {
    $(document).ready(() => {
        alert('Your code executes after jQuery has been loaded.');
    });
});

And then you only need to add the single script tag to your page:

<script data-main="app" src="require.js"></script>

Benefits over other solutions?

You can update jQuery and RequireJS independently
You don't have to rely on shim project being updated
You don't have to manually load jQuery (or anything else that isn't "like a module" that you have a .d.ts file for)

@emrah It is here: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/requirejs/require.d.ts — Fenton, Nov 11 '15 at 15:07

score 6 · Answer 3 · edited Nov 07 '12 at 00:21

Take the basic jquery.d.ts from the TS source (TypeScriptFile)
Move the () declarations from the JQueryStatic into a module like this:
in your code module import the jQuery:

import $ = module("jquery");

declare module "jquery" {
   export function (selector: string, context?: any): JQuery;
   export function (element: Element): JQuery;
   export function (object: { }): JQuery;
   export function (elementArray: Element[]): JQuery;
   export function (object: JQuery): JQuery;
   export function (func: Function): JQuery;
   export function (): JQuery;
}

Compile your module as AMD (tsc --module amd my_code.ts)
Use requirejs to compose your app on the client side with the following config section:

requirejs.config({
   paths: {
      'jquery': 'js/jquery-1.8.2.min'
   }
});

At least this works. Hopefully we can update the jquery.d.ts file in https://github.com/Diullei/tsd to match. — Sean Clark Hess, Nov 07 '12 at 18:57

score 1 · Answer 4 · edited Jun 20 '13 at 15:54

1

First get the (require-jquery) from the official github repo. After this your directory will look like:

require-jquery.js
jquery.d.ts
main.ts
main.js
test.html

Currently the easiest way to work with JQuery and AMD modules on TypeScript is to write the following on the main.ts:

///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
    $('body').append('<b>Hello JQuery AMD!</b>');
});

And call it from your test.html:

<!DOCTYPE html>
<html>
    <head>
        <script data-main="main" src="require-jquery.js"></script>
    </head>
    <body>
        <h1>TypeScript JQuery AMD test</h1>
    </body>
</html>

Hope this helps!

edited Jun 20 '13 at 15:54

Leniel Maccaferri

100,159
46
371
480

answered Oct 06 '12 at 21:40

Murat Sutunc

943
5
9

This isn't for Main.ts or Main.js. I need a module (module.ts) to require and load jquery and still have Module.ts be seen by Typescript as a separate module. Your solution looks like it would work for my entry point, but I need to require jquery in modules that are not the entry point. – Mizzle-Mo Oct 06 '12 at 21:56
You can apply the same logic to the rest of the jquery-require-sample on the github page: https://github.com/jrburke/require-jquery/tree/master/jquery-require-sample Just change the require statement and you are good to go – Murat Sutunc Oct 06 '12 at 22:03
1

@Murat - Typescript is supposed to be abel to generate the require statements for you with module statements. I feel dirty doing this :) – Sean Clark Hess Nov 07 '12 at 18:55
Actually, in some usecases you DO want to include at runtime with require js, and I was wondering to set that up. this helped. thank you. – Flion Nov 26 '14 at 08:48

score 0 · Answer 5 · answered Nov 01 '12 at 00:37

0

You reference external modules by path and filename (minus the .js extension), or just by filename if they are global. In your case, you should do this inside of module.ts:

import jquery = module('./jquery-1.8.2');

Remember to compile with --module AMD since by default you'll get code that uses the commonjs require function.

answered Nov 01 '12 at 00:37

nxn

3,975
2
20
17

I don't think this works, because jquery.d.ts doesn't declare an external jquery module: `declare module "jquery" {}`. It only declares global variables – Sean Clark Hess Nov 07 '12 at 18:57

How to require jquery via AMD in TypeScript

5 Answers5

FOR TYPESCRIPT 1.7+

FOR TYPESCRIPT 0.9+

Linked

Related