Angular-cli 和 jQuery 插件答案

【问题标题】：Angular-cli and jQuery pluginsAngular-cli 和 jQuery 插件
【发布时间】：2016-11-08 06:52:07
【问题描述】：

我正在尝试在使用 angular-cli 创建的 angular2 应用程序中使用一些 jQuery 插件。

如文档中所述，我使用 npm 安装了所需的库，如果可用，还安装了类型。然后我在angular-cli.json 中添加了样式和脚本，如果我打开 chrome 调试器，我可以看到库已正确加载。

问题是每次我尝试使用任何 jQuery 插件时，我总是在控制台中收到一个 js 错误，上面写着“方法不是函数”。

我使用 jQuery 和 fullcalendar 创建了一个小示例，它可以从这个 GitHub 存储库分叉。

注意：问题只存在于需要选择器才能运行的 JQuery 插件（如 $("#myItem").fullcalendar() 或 $(".foo").steps()）。如果您使用 Sweetalert 之类的库，则不会出现问题。

我确定我错过了什么，但我真的无法弄清楚它是什么！

谢谢。

【问题讨论】：

【解决方案1】：

安装（如果你没有安装）

npm install @types/jquery --save-dev

您需要为您的插件编写手动输入。

创建结构：

/custom_typings
 /fullcalendar
  /index.d.ts

比 index.d.ts 类似：

interface JQuery {
  fullCalendar(options?: any): JQuery;
}

比在 tsconfig.json 中

"typeRoots": [
  "../node_modules/@types",
  "../custom_typings"
]

【讨论】：

我的问题不在于类型。您的建议只是让我在编写打字稿文件时避免强制转换 jQuery 选择器。基本上代替 ($("#calendar")).fullcalendar();，我可以写 $("#calendar").fullcalendar();。但这与我的问题几乎没有关系。我更新了 GitHub 上的分支以证明此解决方案不起作用。还是谢谢你。
将你的输入文件命名为 index.d.ts 而不是 index.ts，并且 jQuery 函数不是 fullcalendar，它是 fullCalendar，我在你的 repo 上试过，它可以工作
谢谢！我实际上在 gitter.im 上和一些人一起玩，我们也发现了问题。感谢您更新分支！欣赏它。我将离开那里的分支机构，希望它可以帮助其他人。谢谢！

【解决方案2】：

除了一个小细节之外，一切都是正确的，没有它就无法工作。正如上一部分提到的here，你的组件中必须有

declare var $:any

然后 $ 将是全局的，将看到 fullCalendar() 函数，否则它对我不起作用。

【讨论】：