使用流程
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();