Using JQuery etc. in TypeScript with RequireJS

Question

Possible Duplicate:
How to require jquery via AMD in TypeScript

I created a project in TypeScript. I use RequireJS. Everything was working fine, until I need JQuery...

This is my files structure:

File structure

As you can see, I have jquery-1.8.d.ts file in the modules folder. The .js file for jQuery is inside the lib folder. When I import a module using the config file for RequireJS:

/// <reference path="../modules/require.d.ts" />
/// <reference path="AppMain.ts" />

require.config({
    baseUrl: '../',
    paths: {
        jquery: 'lib/jquery-1.8.3'
    },
    shim: {
        jquery: {
            exports: '$'
        }
    },
    name: "app/AppMain",
    out: "../!built/Test.js",
    optimize: "none"
});

require(['jquery', 'app/AppMain',
],
    ($, main) => {
        var appMain = new main.AppMain();
        appMain.run();
    });

... then it's imported in JavaScript. What to do if I want it inside TypeScript? I need to use JQuery, JQueryStatic and JQueryPromise, declared inside .d.ts file.

When I try simply import a new module, I get an error:

import JQueryExternal = module("../../../modules/jquery-1.8.d"); // error: The name does not exist in the currect scope. A module cannot be aliased to a non-module type
interface Test {
    MyMethod(): JQueryPromise; // here's a sample usage
}

In the beginning I thought that the path is wrong, but I tried to move it inside classes folder and next I imported it in such a way as the rest of classes. Same error:/

How to use jQuery in TypeScript in a way I want to? Is it possible?

Jude Fisher · Accepted Answer · 2013-01-25T17:44:41.803

This is completely confused:

import JQueryExternal = module("../../../modules/jquery-1.8.d");

You don't import the definition file as a module in order to use it in TypeScript. Whether you are using AMD/RequireJS or Node.js style modules to import the eventual code, you always reference d.ts definition files in the same way, at the top of your document:

/// <reference path="YOUR-RELATIVE-PATH-HERE/jquery.d.ts" />

This doesn't make the library available in JavaScript, but it will make the definitions available as you write your TypeScript.

I'm working on a large application similar in scope to yours which makes heavy use of RequireJS and JQuery. I can't see any benefit to loading JQuery as a module. I just import the reference (as described above), and make sure my page loads JQuery (and any other libraries) first:

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/jquery-ui.min.js"></script>
... etc ...
<script type="text/javascript" src="/content/client/libs/require.js" data-main="/content/client/pe.framework"></script>

I have to say, I like the simplicity of this, but isn't a benefit of requirejs it loads .js dependencies async ? (assuming web client js app) — RyBolt, Jul 20 '16 at 20:50

score 2 · Answer 2 · answered Jan 25 '13 at 16:02

I had some trouble with these two playing nicely together, so when I use requireJS with JQuery, I use a bundled version that loads them both. I don't know typescript, though, so I'm not sure how helpful this will be.

Link to the bundle: https://github.com/jrburke/require-jquery

Using JQuery etc. in TypeScript with RequireJS

2 Answers2