如何在 TypeScript 中通过 AMD 要求 jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12763684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to require jquery via AMD in TypeScript
提问by Mizzle-Mo
How do I require the jquery AMD module for my TypeScript module. For example let's say directory structure for scripts looks like this:
我的 TypeScript 模块如何需要 jquery AMD 模块。例如，假设脚本的目录结构如下所示：
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.
我希望从 module.ts 生成的 js 文件要求通过 require.js 加载 jquery-1.8.2.js。
Currently I have:
目前我有：
import jquery = module('jquery')
This results in The name "jquery" does not exist in the current scope.
这导致名称“jquery”在当前范围内不存在。
回答by Poul K. S?rensen
FOR TYPESCRIPT 1.7+
对于打字稿 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)
看起来标准再次发生变化，以下 0.9+ 方法仍然有效，但是随着 ES6 的到来，可以使用以下模块加载。（参考：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)
（这仍然需要 jquery.d.ts，如果安装了 tsd - tsd install jquery）
to install tsd: npm install tsd -g
安装 tsd： npm install tsd -g
FOR TYPESCRIPT 0.9+
对于打字稿 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:
而且，如果您的 jquery.d.ts 没有定义外部模块，请将以下内容添加到 jquery.d.ts：
declare module "jquery" {
export = $;
}
回答by Fenton
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 importstatement. The solution is quite clean, simple and elegant enough to not feel like a work-around.
我认为围绕这一点的很多混淆是由于 jQuery 并没有真正像外部模块那样工作，这会抑制import语句的使用。该解决方案非常干净、简单和优雅，足以让人感觉不像是一种变通方法。
I have written up a simple example of Using RequireJS and jQuery in TypeScript, which works as follows...
我写了一个在 TypeScript中使用 RequireJS 和 jQuery的简单示例，其工作原理如下...
You grab the type definitions from Definitely Typedfor RequireJS and jQuery.
您可以从绝对类型中获取 RequireJS 和 jQuery的类型定义。
You can now use raw RequireJS with static typing inside of the TypeScript file.
您现在可以在 TypeScript 文件中使用带有静态类型的原始 RequireJS。
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.tsfile for)
- 您可以独立更新 jQuery 和 RequireJS
- 您不必依赖于 shim 项目的更新
- 您不必手动加载 jQuery（或其他任何您拥有
.d.ts文件的“不像模块”的东西）
回答by IgorM
- 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:
- 从 TS 源（TypeScriptFile）中获取基本的 jquery.d.ts
- 将 () 声明从 JQueryStatic 移动到这样的模块中：
- 在您的代码模块中导入 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:
- 将您的模块编译为 AMD (tsc --module amd my_code.ts)
- 使用 requirejs 在客户端使用以下配置部分编写您的应用程序：
requirejs.config({
paths: {
'jquery': 'js/jquery-1.8.2.min'
}
});
回答by Murat Sutunc
First get the (require-jquery) from the official github repo. After this your directory will look like:
首先从官方 github repo获取（require-jquery）。在此之后，您的目录将如下所示：
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:
目前在 TypeScript 上使用 JQuery 和 AMD 模块的最简单方法是在 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:
并从您的 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!
希望这可以帮助！
回答by nxn
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:
您可以通过路径和文件名（减去 .js 扩展名）或仅通过文件名（如果它们是全局的）来引用外部模块。在您的情况下，您应该在 module.ts 中执行此操作：
import jquery = module('./jquery-1.8.2');
Remember to compile with --module AMDsince by default you'll get code that uses the commonjs requirefunction.
请记住编译，--module AMD因为默认情况下您将获得使用 commonjsrequire函数的代码。
