如何将 $ 从 jQuery.min.js 导入到 Angular 2 应用程序？找不到名字

Question

我有一个使用 Typescript 的 Angular 2 应用程序。我想将 jQuery 的 $ 用于各种任务，例如

$(document).ready(function(){        // throwing error: "[ts] Cannot find '$'. any"
  console.log("loaded up!");
  $("#main_div").niceScroll();
})

我已经通过 index.html 将 jQuery.min.js 文件导入到我的应用程序中，如下所示：

<script src="app/libs/jquery.min.js"></script>

但是，关于 jQuery 代码，我没有将任何内容导入到 app.component.ts 文件中。是否有必要，如果需要，我该如何导入？

import { GenericService } from './services/Generic.service';       // did not do this
import $ from './libs/jquery.min.js';                              // tried this but does not work

令人惊讶的是，我的代码昨天在我开发时可以运行，但今天我运行 npm start 时就不行了。谁能帮我解决这个导入过程？

Answer 1

只需做一个

typings install jquery --ambient --save

安装类型定义文件。删除 import $ from './libs/jquery.min.js'; 并在 app.component.ts 的顶部添加对 d.ts 文件的引用，如下所示：

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

因为您已经在索引中加载了 Javascript 文件，您只需要为它输入类型，所以 TypeScript 知道 jQuery 的那些名称和方法存在。

Answer 2

只需添加 Jquery 并输入：

typings install jquery --ambient --save

然后在你的索引中：

<script src="bower_components/jquery/dist/jquery.min.js"></script>

通常打字稿可以完成这项工作:)

如何将 $ 从 jQuery.min.js 导入到 Angular 2 应用程序？找不到名字

How to import $ from jQuery.min.js into Angular 2 app? name not found

javascript

jquery

ecmascript-6

systemjs

angular