How to require jquery via AMD in TypeScript

2019-01-09 06:45发布

站内文章 / 移动开发
17 0 0

问题:

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.

回答1:

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 = $;
}


回答2:

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?

  1. You can update jQuery and RequireJS independently
  2. You don't have to rely on shim project being updated
  3. 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)


回答3:

  1. Take the basic jquery.d.ts from the TS source (TypeScriptFile)
  2. Move the () declarations from the JQueryStatic into a module like this:
  3. 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;
}
  1. Compile your module as AMD (tsc --module amd my_code.ts)
  2. 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'
   }
});


回答4:

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!



回答5:

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.



标签： requirejs typescript
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~