Miz*_*-Mo 16 requirejs typescript
我如何为我的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".
Pou*_*sen 26
看起来标准正在再次改变,其中低于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
/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');
//Do your stuff
此外,如果您的jquery.d.ts没有定义外部模块,请将以下内容添加到jquery.d.ts:
declare module "jquery" {
export = $;
}
我认为很多混乱是由于jQuery并不像外部模块那样,它禁止使用import语句.该解决方案非常干净,简单而优雅,足以让您感觉无法解决问题.
我编写了一个在TypeScript中使用RequireJS和jQuery的简单示例,其工作原理如下......
你从RequireJS和jQuery的Definitely Typed中获取类型定义.
现在,您可以在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>
优于其他解决方案？
.d.ts文件)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;
}
requirejs.config({
paths: {
'jquery': 'js/jquery-1.8.2.min'
}
});
小智 1
首先从官方 github 存储库获取 ( 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>
希望这可以帮助！
| 归档时间： |
|
| 查看次数： |
24487 次 |
| 最近记录： |