Angular2如何使用第三方类库（如：jQuery）

如何导入第三方类库？

类库都是经过 npm 进行安装的，好比：

npm install --save jquery

会将所须要的类库文件下载至 node_modules/jquery 当中；因此还须要将类库与Angular进行关联。

打开 src/.angular-cli.json 找到 apps/scripts 节点，添加相应的类库至此。

"scripts": [
    "../node_modules/jquery/dist/jquery.js"
]

如何在Angular中使用呢？

首先，第一关键点TypeScript是编译型，既然是编译型，那么你在代码中出现的任何变量、类、函数都是必需要存在，不然编译器就会在编译时报错。

但，问题来了，如今的JavaScript世界中已经有那么多现成的第三方库，难道说都不能用了？非也！

TypeScript一开始就照顾这些了，因此就会有一个叫.d.ts的声明文件。MS固然不会让你去编写这一个文件，因此就有一个叫 definitelytyped 网站，TA聚集了不少现成类库的第三方.d.ts的声明文件提供咱们下载。

方法一

固然是使用最正规军了，用命令安装jQuery的声明文件。

npm install -D @types/jquery 最后，你能够在代码中这么使用：

import * as $ from 'jquery';

$('body').addClass(''); 完美的智能提示，若是你在VS CODE下的话。

方法二

对于一些并未提供 .d.ts 声明文件的类库，咱们怎么办？那固然只能本身写了。

什么？本身写？很困难吧！很复杂吧！

没那么一回事，声明文件实际上是对一些类库接口的描述，如下是我截取一段jQuery声明文件的部分代码

interface JQueryStatic { /** * 去掉字符串首尾空格 * * @param str 字符串 * @see {@link https://api.jquery.com/jQuery.trim/} */ trim(str: string): string; }

declare var $: JQueryStatic; 我还特地译成中文，这里的含量不多，最关键的就是 declare 它就是把一个变量 $ 定义成类型 JQueryStatic （仍是个接口）。

这样，TS编译器在遇到 $ 时会去找该类型，而且你的代码里面不能出现 $.time1() 之类的，由于你的接口，只有一个 $.trim()。

等等，jQuery几十个接口，我都要这么写吗？ NO！！！固然不是，除非你想写一个又漂亮、又好看、又是中文、又是完美智能提示的声明文件的话。

不然，你那就拿 any 类型吧，TA就是万能货。你不须要写一个很复杂的声明文件，只须要：

declare var $: any; 简单粗暴有效！

结论

哎~实际上是因群里天天均可以看到一句【怎么使用jQuery】；虽然最简单的结果只须要一句话 declare var $: any;，但我仍是啰里吧嗦将了一大堆，可不把来龙去脉将清楚，我烦~。

另，此解只是抛砖引玉，在不少类库中都是通用的办法。但我建议仍是找一些Angular2类库来使用，由于如何更有效的管理JavaScript运行，是一门学问。

但愿此篇对你的帮助，快乐编程！