如何在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库。

// 全局类库  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');

      }

   }

});

全局类库

在HTML文件<script>标签中引入该库
将写好的声明文件与js库放在同一文件夹下，命名相同，后缀名为.d.ts
此时可以在ts文件中使用全局API

如果此时编译器未报错，而浏览器报错not defined，可能是html中引入的路径是相对路径，改成绝对路径即可（以项目目录为根目录）。

声明文件global-lib.d.ts

declare function globalLib(options: globalLib.Options): void;

declare namespace globalLib{

   const version: string;

   function doSomething(): void;

   interface Options {

      [key: string]: any,

   }

}

在ts文件中使用该库：

globalLib({x:1});

globalLib.doSomething();

模块类库

将声明文件放在相同的目录下
在ts中引入

声明文件 module-lib.d.ts

declare function moduleLib(options: Options): void;

interface Options {

   [key: string]: any,

}

declare namespace moduleLib{

   const version: string;

   function doSomething(): void;

}

export = moduleLib; // 这样写兼容性更好

ts中使用类库

import moduleLib from './Libs/module-lib.js';

moduleLib.doSomething();

UMD类库

UMD库有两种使用方式：

引入全局类库的方式
模块类库引入的方式

其中，在使用全局类库的引入方式时，编译器会提示，不建议这样做，需要在tsconfig.json中打开allUmdGlobalAccess配置项可以消除提示。

声明文件 umd-lib.d.ts

declare namespace umdLib {

   const version: string;

   function doSomething(): void;

}

export as namespace umdLib // 专门为umd库准备的语句，不可缺少

export = umdLib

ts中使用UMD库（不再演示全局使用方式）

import umdLib from './Libs/umd-lib'

umdLib.doSomething();

console.log(umdLib.version);

例：在ts中使用jQuery（不演示全局引入方式）

先安装jquery及其声明文件

npm install -D jquery @types/jquery

使用：

import $ from 'jquery';

$(".app").css("color","red");

为类库添加插件

即为类库添加自定义的方法

其中UMD库和模块类库的添加插件方法一致。

// 为全局类库增添自定义方法

declare global {

   namespace globalLib {

      function myFunction(): void

   }

}

globalLib.myFunction = () =>{console.log("global插件")};

// 为模块类库添加自定义方法

declare module "./Libs/module-lib.js"{

   export function myFunction(): void;

} // 为module-lib类库声明myFunction方法

moduleLib.myFunction = () => {console.log("module插件")}; // 定义自定义方法

// 为UMD库添加自定义方法

declare module "./Libs/umd-lib.js"{

   export function myFunction(): void;

} // 为umd-lib类库声明myFunction方法

umdLib.myFunction = () => {console.log("umd插件")}; // 定义自定义方法

globalLib.myFunction();

moduleLib.myFunction();

umdLib.myFunction();

例如，为类库moment增添自定义方法（jQuery不可以，需要使用官方提供的API）

npm install -D moment @types/moment

import m from 'moment';

declare module 'moment'{

   export function myFunction(): void;

}

m.myFunction = () => {console.log("moment插件")};

m.myFunction();