Angular2使用jQuery的方法教程

前言

Angular2是以TypeScript语言作为默认编码语言，所以你看到的全部都是.ts结尾的文件。

那什么是TypeScript

首先，它是一个编译型语言；既然是编译型，那么你像重构、导航、智能提醒这种工具属性就可以发挥出来，所以你会发现使用VS CODE来写Angular简直就是绝配。

同时，TypeScript还带来一些ES6/7才有特性，比如let、const、async等，你无须关心ES几。

最霸气，TypeScript还是一个强类型、泛型、多态等一些面向对象编程的东西。

那，为何我们不选它呢？

当然，说了这么多，这跟主题看似无关，但如果你了解这些，才能看到问题的本质。

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

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

TypeScript一开始就照顾这些了，所以就会有一个叫.d.ts的声明文件。MS当然不会让你去编写这一个文件，所以就有一个叫 网站，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