异步加载没有导出的 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"/>

但这需要我在我的 HTML 中添加一个 <script> 标记，并且该库不是异步加载的。我希望 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上为此打开了work item

Answer 1

Typescript 不会导入模块，除非它们导出某些内容，除非您直接使用它们导出的内容，但是对于像 JQuery 插件这样简单地将新方法添加到 $.解决方案是使用 here 中记录的 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'] },
  }
});

Answer 2

在定义接口的文件底部可以放：

export var JQuery: JQueryStatic;

这将使 JQuery 的智能感知显示在使用 import module 加载的任何文件上。

如果您的文件是异步加载的，并且您将 JQuery 设置为另一个变量（即 myJQuery），您可以声明该文件已经被某个特定的例如，如果您的///<reference path=...> 中有该文件，您应该可以使用：

declare var myJQuery: JQuery;

使您的 myJQuery 类型为 JQuery。

另一个技巧是将接口直接插入到异步加载代码的区域：

interface JQueryStatic {
    myFunc(): string;
}

如果您不介意编辑您的 JQuery.d.ts 文件，您可以将您的函数添加到其中定义的接口中。

与您的示例相关，您应该能够执行以下操作：

declare var __jquery : JQueryStatic;

在定义回调的顶部；并且如果您扩展了 JQueryStatic 的接口并使用 ///<reference path=...> 将其包含在内，则标记应该可以正常工作。

Answer 3

有点骇人听闻，但这是我目前知道的唯一方法。

myplugin.d.ts：扩展 JQueryStatic 接口以包含用于 myplugin 功能的智能感知

/// <reference path="../dep/jquery/jquery.d.ts" />

interface JQueryStatic {
    myFunc(): string;
}

myplugin.ts：一个虚拟文件，其唯一目的是让 typescript 生成一个 amd 模块定义。

var test: number = 1;

consumer.ts：

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

import myplugin = module('myplugin');

// without this typescript knows you aren't actually using the module
// and won't create the define block including your plugin
var workaround = myplugin.test;

$.myFunc();

consumer.js：使用tsc -c --module amd consumer.ts生成

define(["require", "exports", 'myplugin'], function(require, exports, __myplugin__) {
    /// <reference path="myplugin.d.ts" />
    var myplugin = __myplugin__;

    // without this typescript knows you aren't actually using the module
    // and won't create the define block including your plugin
    var workaround = myplugin.test;
    $.myFunc();
})

请注意，myplugin.d.ts 将为 jQuery 和您的插件定义引入智能感知。有必要同时创建 myplugin.d.ts 和 myplugin.ts，因为我不知道如何（如果可能）导出某些内容，同时在同一个文件中扩展现有接口而不会出错。