TypeScript 中的 Module

本文主要介紹 TS 中的 module 與 non-modules 的區(qū)別；.d.ts 文件的作用；以及模塊路徑的解析規(guī)則；

TS 中規(guī)定頂層存在 import 、export 關(guān)鍵字的代碼文件被認(rèn)為是一個模塊，沒有頂層 import 、export 的文件認(rèn)為是一般腳本。

模塊與腳本的區(qū)別

模塊 modules 與腳本 non-modules 存在以下幾個方向上的區(qū)別， 這是 JavaScript 中模塊與腳本的區(qū)別（TypeScript 同樣）。

• 作用域上的區(qū)別

module 存在自己的作用域。在模塊中定義的變量、函數(shù)、類都存在于自己的作用域上，外部模塊和腳本代碼不可見。

non-modules 運(yùn)行在 global scope 上。頂層定義的變量、函數(shù)、類都存在于全局作用域上。外部模塊和腳本均可訪問。

• 導(dǎo)出和導(dǎo)入

module 使用 import export 關(guān)鍵字來分別控制從其他模塊導(dǎo)入代碼段（變量、函數(shù)、類等）以及導(dǎo)出模塊中的代碼段。

non-modules 中定義的函數(shù)和變量在全局作用域中，因此不需要額外的導(dǎo)入導(dǎo)出操作，直接可全局訪問。

• 代碼管理

module 便于代碼切分組織，可按照抽象層次或者功能進(jìn)行模塊劃分，便于代碼組織。

腳本代碼一般都是寫在統(tǒng)一的幾個文件中，需要注意變量的訪問順序，并且有污染全局作用域的風(fēng)險需要規(guī)避。

• 依賴管理

模塊依賴是通過 import 來顯示指定依賴關(guān)系，允許更好的控制依賴關(guān)系，可以降低命名上沖突的可能性。

腳本的依賴關(guān)系是隱藏的（需要認(rèn)真閱讀代碼，逐層debug才能分析清楚），腳本按照架子啊的順序執(zhí)行，腳本之間加載的順序很重要【腳本加載的順序變化可能出現(xiàn): 函數(shù)未找到，變量未定義等錯誤 】

• 加載時序

模塊支持異步加載，加載完成后在進(jìn)行代碼執(zhí)行，可以減少HTML文檔解析上的阻塞。

腳本是經(jīng)典的同步加載，在HTML中出現(xiàn)同步腳本則需要等待代碼加載并執(zhí)行完成后HTML解析才繼續(xù)執(zhí)行。通常代碼中除了部分需要提前執(zhí)行的代碼（權(quán)限檢查，用戶校驗(yàn)等），其余的都放在HTML文檔的末尾進(jìn)行加載（可顯式異步加載）執(zhí)行。

// oneModule.js

export function foo(params) {
    //...
}

export class Bar {
    constructor() {
        //...
    }
}

// twoModule.js

import { foo, Bar } from './oneModule.js';

export function run(){
    const ins = new Bar();

    // ...
    return foo(ins);
}

TS 中模塊加載機(jī)制

模塊之間建立關(guān)系是靠 import 和 export 來配合使用的，模塊加載的時候路徑指定有兩種方式一種是相對路徑另一種是非相對路徑。相對路徑根據(jù)當(dāng)前文件位置計算索引找到文件位置，非相對位置模塊導(dǎo)入編譯器會從包含導(dǎo)入的文件目錄開始一次向上級目錄遍歷，嘗試匹配到對應(yīng)的文件。

.d.ts 文件的用法以及相關(guān)內(nèi)容

在TypeScript中，.d.ts文件通常用來定義 JavaScript 庫或模塊的類型聲明。它們是用于描述已存在的JavaScript代碼的類型信息的文件，主要描述JavaScript 模塊的結(jié)構(gòu)（導(dǎo)出類的參數(shù)類型，函數(shù)簽名格式等）目的是方便在ts代碼中進(jìn)行類型檢查和智能感知提醒。當(dāng)使用TypeScript編寫代碼時，可以使用類型聲明文件來獲得對JavaScript庫或模塊的類型檢查和智能感知支持。這些聲明文件通常以.d.ts為擴(kuò)展名。

通過引入適當(dāng)?shù)念愋吐暶魑募?，可以有以下幫助?/p>

• 類型檢查：類型聲明文件允許TypeScript編譯器驗(yàn)證代碼與聲明文件中定義的類型是否匹配。這有助于在開發(fā)過程中捕獲潛在的類型錯誤，并提供更強(qiáng)大的靜態(tài)類型檢查。
• 智能感知：類型聲明文件為編輯器提供了有關(guān)庫或模塊的類型信息，從而提供了智能感知功能。這使得在編寫代碼時能夠獲得自動完成、參數(shù)提示和文檔等功能，以增加開發(fā)效率。
• 文檔化：類型聲明文件還可以作為庫或模塊的文檔。通過查看類型聲明文件，可以了解庫的可用函數(shù)、類、接口和類型等詳細(xì)信息，從而更好地理解和使用它們。

案例，定義一個 worker 來實(shí)現(xiàn) ThreeJS 中數(shù)據(jù)的處理：

onmessage(params) {
  //
  const data: Block[] = [];
  ... 大量計算
  // 線程計算完成返回
  postMessage({ fragments: data  }, timestamp: params.timestamp);
}

declare module '*?worker' {
  const workerConstructor:{
    new (): Worker
  };
  export default workerConstructor
}

import './worker.d.ts';
import Worker from './worker.ts?worker'
function calculateAllBlocks(threadCount: number) {
  for (let i =0; i< threadCount; i++) {
    const worker = new Worker();
    worker.onmessage = dataParse;
    // 傳入?yún)?shù)啟動線程進(jìn)行計算
    worker.postMessage({..., timestamp: performance.now()});
  }
}
function dataParse(workerEvent: MessageEvent) {
  // 處理線程返回數(shù)據(jù)
}

這樣我們能快速定義一個 worker.ts 線程處理模塊代碼，而不需要定義成js再作為參數(shù)傳遞進(jìn)去加載執(zhí)行。 main.ts 模塊中使用了 Worker 類型也都合法， 原因就是導(dǎo)入了 worker.d.ts 來進(jìn)行類型解釋。

worker.d.ts 中使用了一個后綴模塊聲明通配符也就是“*?worker”，只有在導(dǎo)出模塊上加上能通過校驗(yàn)的前后綴才能正確的匹配上（注意main.ts 中的導(dǎo)入）。TS中聲明通配符只有在導(dǎo)出的時候使用了匹配上的后綴才會使用對應(yīng)的類型來進(jìn)行解釋目標(biāo)模塊 。

以上就是TypeScript中Module使用區(qū)別及模塊路徑解析規(guī)則的詳細(xì)內(nèi)容，更多關(guān)于TypeScript Module模塊路徑的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論