17

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

    jquery-1.8.2.js
    jquery.d.ts
    模块.ts
    需要.js

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

目前我有：

    导入 jquery = 模块（'jquery'）

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

4

5 回答 5

27

对于打字稿 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

对于打字稿 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 = $;
}
于 2013-09-01T20:04:48.823 回答
8

我认为这方面的很多困惑是由于 jQuery 并没有真正像外部模块一样，它禁止使用import语句。该解决方案非常干净、简单和优雅，足以让人感觉不像是一种变通方法。

我编写了一个在 TypeScript 中使用 RequireJS 和 jQuery的简单示例，其工作原理如下...

您可以从为 RequireJS 和 jQuery确定类型中获取类型定义。

您现在可以在 TypeScript 文件中使用带有静态类型的原始 RequireJS。

应用程序.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>

与其他解决方案相比的优势？

  1. 您可以独立更新 jQuery 和 RequireJS
  2. 您不必依赖 shim 项目正在更新
  3. 您不必手动加载 jQuery（或其他任何不是“像模块”的.d.ts文件）
于 2013-01-26T13:44:08.627 回答
6
  1. 从 TS 源 ( TypeScriptFile )获取基本的 jquery.d.ts
  2. 将 JQueryStatic 中的 () 声明移动到这样的模块中：
  3. 在您的代码模块中导入 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. 将您的模块编译为 AMD (tsc --module amd my_code.ts)
  2. 使用 requirejs 在客户端通过以下配置部分编写您的应用程序：
requirejs.config({
   paths: {
      'jquery': 'js/jquery-1.8.2.min'
   }
});
于 2012-10-09T14:59:38.680 回答
1

首先从官方 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>

希望这可以帮助！

于 2012-10-06T21:40:13.870 回答
0

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

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

记住要编译，--module AMD因为默认情况下你会得到使用 commonjsrequire函数的代码。

于 2012-11-01T00:37:04.280 回答