TypeScript 里聲明模塊

在 TypeScript 里聲明模塊，最早是用 namespace 和 module 的語法，后來支持了 es module，類型和變量會(huì)用 import 來導(dǎo)入、用 export 導(dǎo)出。

比如你寫了一個(gè)庫，導(dǎo)出的變量叫 Guang，它下面有 name 和 age 兩個(gè)屬性，所以你是這樣聲明類型的：

export default Guang;
declare namespace Guang {
    export const name = 'guang';
    export const age = '20';
}

使用的時(shí)候用 import 來導(dǎo)入：

import Guang from 'xxx';
console.log(Guang.name, Guang.age);

這樣是沒啥問題。

但如果這個(gè)庫除了支持 es module 的方式使用，還支持 umd 呢？

UMD 規(guī)范想必大家很熟悉了，就是判斷是 CMD、AMD 還是全局變量的方式，然后用合適的模塊規(guī)范導(dǎo)出模塊的值：

但這里面不包含 es module，因?yàn)樗皇?api 而是語法。

那如果你構(gòu)建出了 umd 規(guī)范的代碼，使用者用 script 的方式給引入了：

這樣還能做類型提示和檢查么？

不能了，因?yàn)槟銓?dǎo)出是用的 esm 的 export，只有 import 引入才會(huì)有類型提示和對(duì)應(yīng)的檢查。

那怎么辦呢？

類型提示檢查

用 declare global 聲明為全局類型？

declare global {
    namespace Guang {
        export const name = 'guang';
        export const age = '20';
    }
}

這樣是能解決問題，但這樣在 esm 模塊里也不用 import 就可以直接用了，而我們想在 esm 里用 import，其他情況才用全局類型。

有啥方式能約束在 esm 里只能 import 用，但是其他地方可以做為全局類型呢？

TypeScript 專門為這種情況設(shè)計(jì)個(gè)了語法，叫 export as namespace xxx；

比如上面的代碼可以這樣寫：

export = Guang;
export as namespace Guang;
declare namespace Guang {
    export const name = 'guang';
    export const age = '20';
}

export = Guang 是兼容老的 ts import 語法的，支持 umd 得加上這一行，然后加上 export as namespace Guang;

UMD 的 global 類型

這樣你在非 esm 里就可以通過全局類型的方式使用它了：

而在 esm 里，如果也是這樣用的，它會(huì)報(bào)錯(cuò)：

說是你在 esm 模塊里用了一個(gè) UMD 的 global 類型，建議用 import 的方式代替。

如果你用 import 的方式引入了這個(gè)類型，就不報(bào)錯(cuò)了：

這就是它比 declare global 好的地方，可以約束在 esm 里用 import 引入，非 es module 可以作為全局類型。

這樣就完美兼容了 esm 和 umd 兩種模塊引入方式。

而且如果你不想要這種限制，也可以在 tsconfig.json 里關(guān)掉。

有個(gè) allowUmdGlobalAccess 的編譯選項(xiàng)就是控制是否支持在 es module 里使用 UMD 全局類型的：

默認(rèn)是 false，開啟以后在 es module 里使用 UMD 全局類型就不報(bào)錯(cuò)了：

很多庫都需要兼容 esm 和 umd 的使用方式都會(huì)這樣用，比如 react：

所以，如果你開發(fā)的庫需要支持 esm 和 umd 的話，可以用 export namespace as xxx 來導(dǎo)出，會(huì)比 declare global 更好。

總結(jié)

現(xiàn)在 TypeScript 的模塊都是 es module 的方式引入的，但有一些包是支持 umd 的，它們可能用各種方式引入模塊，為了實(shí)現(xiàn) umd 模塊的類型檢查，可以用 declare global 把導(dǎo)出的變量變?yōu)槿值摹?/p>

但是在 es module 里還是希望使用 import 引入，非 es module 才用全局類型，所以更好的方式是使用 export as namespace xxx。

用這種方式聲明的類型，當(dāng)在非 esm 中使用時(shí)，會(huì)作為全局類型，而在 esm 中如果直接引用全局類型會(huì)報(bào)錯(cuò)，建議用 import 引入。這是它比 declare global 更好的地方。

當(dāng)然，也可以把 allowUmdGlobalAccess 的編譯選項(xiàng)設(shè)置為 true 來放開這種約束。

像 react 這種支持 umd 的庫都是用這種方式導(dǎo)出類型的，如果你也要開發(fā)一個(gè)支持 umd 的庫，不妨也試試 export as namespace 吧。

以上就是UMD的包導(dǎo)出TS 類型方法示例的詳細(xì)內(nèi)容，更多關(guān)于UMD包導(dǎo)出TS類型的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論