使用流程

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/momentimport m from 'moment'; declare module 'moment'{export function myFunction(): void; } m.myFunction = () => {console.log("moment插件")};m.myFunction();

?

轉載于:https://www.cnblogs.com/V587Chinese/p/11519932.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的如何在TypeScript中使用JS类库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。