如何在TypeScript中使用JS类库

使用流程

  1. 首先要清楚类库是什么类型,不同的类库有不同的使用方式

  2. 寻找声明文件

JS类库一般有三类:全局类库、模块类库、UMD库。例如,jQuery是一种UMD库,既可以通过全局方式来引用,也可以模块化引用。

声明文件

当我们要使用一个类库时,需要ts声明文件,对外暴露API,有时候声明文件在源码中,大部分是单独提供额外安装。比如jQuery需要额外安装类型声明包。

幸运的是,大部分的类库,TS社区都有声明文件。名称为@types/类库名,需要去这个网站搜一下http://microsoft.github.io/TypeSearch/

如果没有,需要自己去写一个,这也是为社区贡献的好机会。http://definitelytyped.org/guides/contributing.html这里提供了一些写声明文件的方法。在写ts声明文件的时候,暂时用不到的API可以可以不写。>

下面我将演示,如何在ts文件中使用三种类库。首先准备三个js文件,分别表示全局类库、模块类库、UMD库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 全局类库  global-lib.js
function globalLib(options) {
console.log(options);
}
globalLib.version = "1.0.0";
globalLib.doSomething = function () {
console.log('globalLib do something');
};

// 模块类库 module-lib.js
const version = "1.0.0";
function doSomething() {
console.log('moduleLib do something');
}
function moduleLib(options) {
console.log(options);
}
moduleLib.version = version;
moduleLib.doSomething = doSomething;
module.exports = moduleLib;

// UMD库 umd-lib.js
(function (root, factory) {
if(typeof define === "function" && define.amd)
{
define(factory);
}else if(typeof module === "object" && module.exports)
{
module.exports = factory();
}else
{
root.umdLib = factory();
}
})(this, function () {
return {
version: "1.0.2",
doSomething() {
console.log('umdLib do something');
}
}
});

全局类库

  1. 在HTML文件