如何在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');
      }
   }
});

全局類庫

1. 在HTML文件<script>標簽中引入該庫
2. 將寫好的聲明文件與js庫放在同一文件夾下，命名相同，后綴名為.d.ts
3. 此時可以在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();

模塊類庫

1. 將聲明文件放在相同的目錄下
2. 在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();