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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM