FOR TYPESCRIPT 1.7 +

Question

如何为我的TypeScript模块使用jquery AMD模块。例如，假设脚本的目录结构如下所示：


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

我希望module.ts生成的js文件要求通过require.js加载jquery-1.8.2.js。

目前我有：


    import jquery = module('jquery')

这导致当前范围中不存在名称“jquery”。

Answer 1

FOR TYPESCRIPT 1.7 +

看起来标准正在再次改变，其中低于0.9+的方法仍然有效，但是随着ES6的到来，可以使用以下模块加载。（参考：https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105）

import * as $ from "jquery";

甚至是部分

import {extend} from "jquery";

（这仍然需要jquery.d.ts，如果安装了tsd - tsd install jquery）

安装tsd：npm install tsd -g

FOR TYPESCRIPT 0.9 +

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

//Do your stuff

而且，如果您的jquery.d.ts没有定义外部模块，请将以下内容添加到jquery.d.ts：

declare module "jquery" {
    export = $;
}

Answer 2

我认为围绕这个问题的许多困惑是由于jQuery实际上不像外部模块，它禁止使用import语句。解决方案非常干净，简单而优雅，不足以让人觉得无法解决问题。

我写了一个Using RequireJS and jQuery in TypeScript的简单示例，其工作原理如下......

您从Definitely Typed获取RequireJS和jQuery的类型定义。

现在，您可以在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.');
    });
});

然后您只需要将单个脚本标记添加到您的页面：

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

优于其他解决方案？

您可以单独更新jQuery和RequireJS
您不必依赖于更新的填充项目
您不必手动加载jQuery（或其他任何不像“模块”那样有.d.ts文件的内容）

Answer 3

从TS源（TypeScriptFile）
将（）声明从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;
}

将您的模块编译为AMD（tsc --module amd my_code.ts）
使用requirejs在客户端使用以下配置部分撰写应用程序：

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

Answer 4

首先从官方github repo获取（require-jquery）。在此之后，您的目录将如下所示：

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

目前在TypeScript上使用JQuery和AMD模块的最简单方法是在main.ts上编写以下内容：

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

从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>

希望这有帮助！

Answer 5

您可以通过路径和文件名（减去.js扩展名）引用外部模块，如果它们是全局的，则只引用文件名。在你的情况下，你应该在module.ts中执行此操作：

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

请记住使用--module AMD进行编译，因为默认情况下，您将获得使用commonjs require函数的代码。

如何在TypeScript中通过AMD要求jquery

5 个答案:

FOR TYPESCRIPT 1.7 +

FOR TYPESCRIPT 0.9 +