使用带有 Typescript 的 JQuery 插件答案

【问题标题】：Using JQuery Plugins With Typescript使用带有 Typescript 的 JQuery 插件
【发布时间】：2020-03-16 21:34:44
【问题描述】：

我有一个 JQuery 插件 (mixItUp)，我正在尝试与 Typescript 一起使用，它没有自己的 *.d.ts 文件。

我怎样才能使它与打字稿一起工作？

我制作了自己的 mixItUp.d.tds 文件，其内容如下：

interface JQuery
{
    mixItUp():any;
}

在我尝试使用 mixItUp 的模块中，我使用以下代码：

$('#mySelector').mixItUp();

它编译得很好，我得到了 mixItUp 的智能感知，所以不知何故它在我没有引用的情况下拾取了 mixItUp.d.ts 文件。

在 html 中，我在 jquery 中加载，然后在此模块之前加载非打字稿（纯 js）mixItUp 库，所以我知道 jquery 和 mixitup 在那个时间点确实存在。

但是，当我加载页面时，我收到以下错误消息：

$(...).mixItUp is not a function(…)

我发现的大多数指南似乎都在使用我理解的引用 *.d.ts 文件的旧方法。

有人可以解释一下使用带有 typescript 的 JQuery 插件的正确方法，以及如果可能的话如何引用非 typescript 库（我假设技术会类似）。

谢谢。

【问题讨论】：

页面上有mixItUp javascript文件吗？
@Radio- 是的。我已经编辑了我的问题，以明确这就是我所指的“纯 js”库。
不确定这是否有帮助，看看您是否可以在这里重现您的问题：jsfiddle.net/dmqr7szq

标签： javascript jquery typescript

【解决方案1】：

如果它发生在运行时，很可能不是由 Typescript 引起的，因为 TS 只是被编译为 JS。由于 TS 本身不了解您的库，并且仅通过您的界面获取有关它的信息，因此它按原样编译该调用（可以通过查看开发人员控制台或类似的输出来证明）。

因此，请确保在执行代码之前（但在 jQuery 之后）正确加载 mixItUp，并且它应该可以正常工作（假设您使用的 jQuery 版本受插件支持）

【讨论】：

如果我把行 $('#mySelector').mixItUp();直接在页面上，它加载得很好，但是当我将其注释掉并取消注释我的 .ts 文件中的那个时，我得到了错误。也许如果有人可以解释如何通常引入/引用非打字稿库，那可能会导致答案？
这里有很多因素会影响结果。如果您可以提供有关如何构建 TS 的更多信息，然后将 JS 文件包含在您的页面上，那就太好了。页面的内容（或至少包含 JS 文件的部分）也会有所帮助。
一般来说，将 JS 库添加到 TS 文件中没有什么神奇的。其实你甚至不需要做任何特别的事情。 TS 编译成 JS 并且完全兼容它。您可以将自制类型添加到您的项目中（就像您所做的那样），以获得代码完成和编译时检查您的代码是否正确使用库的好处。除此之外，它是完全可选的。
.ts 文件通过 browserify 在 gulp 构建过程中捆绑在一起，该过程为我的 js 输出单个 app.js 文件，供应商打字稿文件也是如此，输出供应商。 js。在 html 页面上，我为 vendor.js 放置一个脚本标记，然后为 mixItUp 库放置一个脚本标记，最后为我的 app.js 文件放置一个脚本标记。似乎 mixItUp 只是没有从 .ts 文件中正确连接到 JQuery，但是当我尝试在模块之外（仅在脚本标记中）执行它时工作正常。
从您提供的信息中，老实说，我不明白为什么它不起作用。您在 TS 文件中使用的 jQuery 与您在脚本标签中使用的 jQuery 相同（或者至少应该是。如果由于某种原因在加载 mixItUp 后加载了另一个版本，则可能不是）。请务必检查您正在使用的某些库是否尚未包含 jQuery。