在 Typescript 文件中使用 jQuery 插件答案

【问题标题】：Using jQuery plugins inside Typescript file在 Typescript 文件中使用 jQuery 插件
【发布时间】：2017-04-02 08:43:56
【问题描述】：

我在公司项目中第一次使用打字稿，我有这个 JS 文件：

/// <reference path="jquery.d.ts" />
/// <reference path="bootstrap-switch.d.ts" />    
function CreateIdeSkuValidoSwitch() {
     $("[name='actived_ideskuvalido']").bootstrapSwitch();
}

但是当我在我的 Typescript 函数中使用它时，编译会说：属性不存在于类型“jQuery”上。

我想知道，我如何在我的 ts 文件中使用这个 jQuery 插件开关和 jQuery。

对不起，我的英语不好。

【问题讨论】：

很确定 TS 只是编译 JS。尝试引用编译后的 JS 文件而不是 TS 文件的路径。我可能错了，尤其是从星期五开始。
@Devilscomrade 当我这样做时，我看到：无法解析引用的文件：
真的很困惑，如果jquery.d.ts和bootstrap-switch.d.ts在同一个目录下，除非没有找到定义文件，否则应该不会出现这个错误。如果你有像$("[name='actived_ideskuvalido']").html('hello') 这样的代码，你会收到错误吗？
@JuanMendes HTML ok，因为这个函数在jQuery里面，但是bootswitch在jQuery里面不存在。
Using jQuery plugin in TypeScript的可能重复

标签： jquery typescript

【解决方案1】：

正如您在此处看到的https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/bootstrap-switch/bootstrap-switch.d.ts jQuery 类型使用bootstrapSwitch 方法扩展的，因此，如果将引用正确添加到堆栈中，您应该没有问题...

【讨论】：

我会尝试，但问题是，想象一下我是否使用了没有 .ts 文件的插件。
@soamazing 你的问题是如何在 TypeScript 中使用 .d.ts 文件中还没有 typescript 定义的插件？
可能这就是你需要的：stackoverflow.com/questions/26540165/…

【解决方案2】：

您的问题不清楚；但是，从您的评论“想象一下，如果我使用了没有 .ts 文件的插件”，您似乎在问：如何使用还没有 .d.ts 定义文件的 jQuery 插件。

在 TypeScript 中定义 jQuery 的原因是因为使用的是 jQuery 定义文件。该文件告诉 TypeScript $() 是一个函数，它返回一个带有已知 jQuery 函数的对象。

如果你创建一个新插件，你应该创建一个.d.ts 文件，让你的插件的用户从 TypeScript 引用你的代码。

如果您使用的插件没有 TypeScript 定义文件，您必须自己创建定义，或者您可以将 jQuery 对象强制转换为 any。第一个选项要好得多，因为 IDE 和编译器仍然会为您提供帮助。

假设您创建了一个新插件，将对象的内容替换为“Hello World”；

(function( $ ) {
    $.fn.helloWorld = function() {  
      this.html('Hello World');
      return this;
    }
})(jQuery);

// Either the plugin author provides the definition, or you write them yourself
interface JQuery {
    helloWorld();
}

TypeScript 允许你多次定义一个接口，将它与之前的定义结合起来，所以上面的定义不会覆盖现有的定义。

见Using jQuery plugin in TypeScript

而here's an example 表明您可以向现有接口添加行为

Definitely Typed 是一个资源维护定义文件，允许您使用 TypeScript 中的常规 JavaScript 库，它有许多流行的 jQuery 插件的定义

【讨论】：