没有导出的TypeScript声明的异步加载

Question

我有许多jQuery插件,我想在TypeScript中使用AMD模式加载.例如,我可能有这样的结构:

/lib/jquery.myplugin.js
/app.ts

该插件只是扩展了jQuery.它不提供新的顶级函数或变量.一个例子可能是:

// jquery.myplugin.js
jQuery.fn.myExample = function() { ... }

相应的jquery.myplugin.d.ts文件如下所示:

interface JQuery {
    myExample();
}

所以现在在app.ts我可以调用类似的东西$('#my-element').myExample().请注意,这假设我已经加载了Microsoft的jquery.d.ts声明.

我的问题是如何异步加载此库并利用TypeScripts静态类型？我可以像这样使用它:

/// <reference path="lib/jquery.myplugin.d.ts"/>

但这需要我在<script>HTML中添加标签,并且不会异步加载库.我希望TypeScript生成此代码:

define(["require", "exports", "lib/jquery.myplugin"], function (require, exports, __jquery.myplugin__) {
    ...
    // Use my plugin
    $('#my-element').myExample();
}

但是由于.d.ts文件中没有导出,我无法编写import myplugin = module('lib/jquery.myplugin').

我最接近的是jquery.myplugin.d.ts使用接口声明引用另一个ts文件并包含至少一个导出.但是在这个库中没有什么可以导出的,为了获得所需的输出,我不仅需要添加导出,而且还必须调用它.

更新:我在typescript.codeplex.com上为此打开了一个工作项

Answer 1

Typescript 不会导入模块，除非它们导出某些内容并且除非您直接使用它们导出的内容，但对于像 JQuery 插件这样简单地向 $ 添加新方法的东西来说，这些事情并不正确。解决方案是使用此处记录的 amd-dependency 标志。

在文件顶部添加如下行：

///<amd-dependency path="jgrowl" />

这将强制 Typescript 在编译后的 Javascript 调用中列出它define。您还需要在 require.config 中为插件设置路径和填充程序，如下所示：

require.config({
  paths: {
    jquery: "external/jquery-2.1.1",
    jgrowl: "external/jquery.jgrowl-1.4.0.min",
  },
  shim: {
    'jgrowl': { deps: ['jquery'] },
  }
});