Requirejs 如何在TypeScript中通过AMD要求jquery_Requirejs_Typescript

Requirejs 如何在TypeScript中通过AMD要求jquery

requirejs typescript

Requirejs 如何在TypeScript中通过AMD要求jquery,requirejs,typescript,Requirejs,Typescript,我如何要求我的TypeScript模块使用jquery AMD模块。例如，假设脚本的目录结构如下所示： jquery-1.8.2.js jquery.d.ts module.ts require.js jquery-1.8.2.js jquery.d.ts 模块1.ts require.js 我希望module.ts生成的js文件要求通过require.js加载jquery-1.8.2.js 目前我有： import jquery = module('jquery') 导

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

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

目前我有：

import jquery = module('jquery') 导入jquery=模块（'jquery'）这导致名称“jquery”在当前范围内不存在。

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

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>');
});

///
申报var要求；
require（[“jquery”]，函数（$：JQueryStatic）{
$（'body'）.append（'Hello JQuery AMD！'）；
});

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


typescriptjqueryamd测试

希望这有帮助

从ts源（）获取基本jquery.d.ts

将（）声明从JQueryStatic移动到如下模块中：

在代码模块中，导入jQuery：

将您的模块编译为AMD（tsc——模块AMD my_code.ts）

使用requirejs在客户端使用以下配置部分编写应用程序：

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

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

请记住使用

--module AMD

进行编译，因为默认情况下，您会得到使用commonjs

require

函数的代码。

我认为这方面的很多混乱是由于jQuery实际上不像一个外部模块，它禁止使用

import

语句。这个解决方案非常干净、简单、优雅，不会让人觉得像是一个工作环境

我写了一个简单的例子，它的工作原理如下

您可以从中获取RequireJS和jQuery的类型定义

您现在可以在TypeScript文件中使用原始RequireJS和静态类型

app.ts

///
///
require（['jquery']，函数（$）{
$（文档）.ready（（）=>{
警报（'您的代码在jQuery加载后执行'）；
});
});

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

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

相对于其他解决方案的好处

您可以独立地更新jQuery和RequireJS

您不必依赖于正在更新的shim项目

您不必手动加载jQuery（或任何其他不“像模块”的东西，您有一个

.d.ts

文件用于此文件）

对于TYPESCRIPT 1.7+ 看起来标准又在改变，低于0.9+的方法仍然有效，但随着ES6的到来，可以使用下面的模块加载。（参考资料：）

甚至部分

import {extend} from "jquery";

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

tsd安装jquery

）

要安装tsd:

npm安装tsd-g

对于TYPESCRIPT 0.9+

这不适用于Main.ts或Main.js。我需要一个模块（module.ts）来要求和加载jquery，但仍然需要将module.ts作为单独的模块由Typescript查看。你的解决方案似乎对我的切入点有效，但是我需要在不是入口点的模块中使用jquery。您可以在github页面上对jquery require示例的其余部分应用相同的逻辑：只需更改require语句，就可以了go@Murat-Typescript应该是abel，以便使用模块语句为您生成require语句。实际上，在某些用例中，您确实希望在运行时包含requirejs，我想知道如何设置它。这有帮助。谢谢。我认为这不起作用，因为jquery.d.ts不声明外部jquery模块：

声明模块“jquery”{}

。它只声明全局变量，至少这是有效的。希望我们可以在中更新jquery.d.ts文件以匹配。如果我尝试这样做，就会出现错误：无法解析外部模块“jquery”。并且模块不能被别名为非模块类型。听起来您在jquery.d.ts中没有声明模块“jquery”。发现问题的原因是完全不同的：我的jquery库名为“jquery-1.9.1”FacePalm for typescript 1.7+，我们还需要

？取决于您使用的IDE。编译器必须了解jquery.d.ts。如果使用TSD，默认情况下会有一个引用所有其他类型的TSD.d.ts，然后告诉编译器repo上缺少TSD.d.tsrequire js。找不到。@emrah它在这里：

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

import * as $ from "jquery";

import {extend} from "jquery";

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

//Do your stuff

declare module "jquery" {
    export = $;
}