没有导出的TypeScript声明的异步加载 [英] Asynchronous load of TypeScript declarations with no exports

问题描述

我想使用TypeScript中的AMD模式加载许多jQuery插件.例如，我可能具有以下结构:

I have a number of jQuery plugins that I would like to load using the AMD pattern in TypeScript. For example, I might have this structure:

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

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

The plugin simply extends jQuery. It provides no new top-level functions or variables. An example might be:

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

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

The corresponding jquery.myplugin.d.ts file looks like:

interface JQuery {
    myExample();
}

因此，现在在app.ts中，我可以调用类似$('#my-element').myExample()的名称.请注意，这是假设我已经加载了Microsoft的jquery.d.ts声明.

So that now in app.ts I can call something like $('#my-element').myExample(). Note that this assumes I already have the jquery.d.ts declarations from Microsoft loaded.

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

My question is how do I load this library asynchronously and take advantage of TypeScripts static typing? I could use it like this:

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

，但这需要我向HTML添加<script>标记，并且库不会异步加载.我希望TypeScript生成以下代码:

but that requires me to add a <script> tag to my HTML, and the library is not loaded asynchronously. I want TypeScript to generate this code:

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').

However since there are no exports in the .d.ts file I can't write import myplugin = module('lib/jquery.myplugin').

我得到的最接近的结果是制作一个jquery.myplugin.d.ts，该jquery.myplugin.d.ts使用接口声明引用另一个ts文件，并且至少包含一个导出.但是，此库中没有要导出的内容，为了获得所需的输出，我不仅要添加导出，还必须调用它.

The closest I've gotten is to make a jquery.myplugin.d.ts that references another ts file with the interface declaration and includes at least one export. However there is nothing to export in this library, and in order to get the desired output I have to not only add an export but I have to call it.

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

推荐答案

Typescript不会导入模块，除非它们导出了某些内容并且除非您直接使用它们导出的内容，但是对于诸如JQuery插件之类的东西而言，这些都不是正确的向$添加新方法.解决方案是使用

Typescript won't import modules unless they export something and unless you directly use what they exported, but those things aren't true for things like JQuery plugins that simply add new methods to $. The solution is to use the amd-dependency flag as documented here.

在文件顶部添加如下一行:

Add a line like this at the top of your file:

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

这将强制Typescript在已编译Javascript的define调用中列出它.您还需要在require.config中为插件设置路径和填充，例如:

This will force Typescript to list it in the define invocation in the compiled Javascript. You'll also need to set up a path and shim for your plugin in your require.config, like this:

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

这篇关于没有导出的TypeScript声明的异步加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！