TypeScript 中的 Module

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

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

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

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

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

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

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

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

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

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

• 代碼管理

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

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

• 依賴管理

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

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

• 加載時(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 來(lái)配合使用的，模塊加載的時(shí)候路徑指定有兩種方式一種是相對(duì)路徑另一種是非相對(duì)路徑。相對(duì)路徑根據(jù)當(dāng)前文件位置計(jì)算索引找到文件位置，非相對(duì)位置模塊導(dǎo)入編譯器會(huì)從包含導(dǎo)入的文件目錄開(kāi)始一次向上級(jí)目錄遍歷，嘗試匹配到對(duì)應(yīng)的文件。

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

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

通過(guò)引入適當(dāng)?shù)念愋吐暶魑募梢杂幸韵聨椭?/p>

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

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

onmessage(params) {
  //
  const data: Block[] = [];
  ... 大量計(jì)算
  // 線程計(jì)算完成返回
  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ù)啟動(dòng)線程進(jìn)行計(jì)算
    worker.postMessage({..., timestamp: performance.now()});
  }
}
function dataParse(workerEvent: MessageEvent) {
  // 處理線程返回?cái)?shù)據(jù)
}

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

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

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

最新評(píng)論