TS 中的模組聲明

在這裡我們學習如何撰寫高品質的 Typescript 聲明檔。因此，您正在使用 ReactJS 進行編碼並想要匯入 SVG 文件，但您的 IDE/tsc 正在抱怨。

現在是時候轉向 Stackoverflow 尋求快速複製貼上解決方案了。

但是讓我們堅持一下並嘗試理解這些文件以及它們對我們的作用。

什麼是模組？

在 TS/JS 中，我們有許多方法來模組化用 TS/JS 編寫的應用程式。目前佔據主導地位的是 ESM（又稱 ES 模組、ES6 模組）。我們通常透過它們的語法來了解它們：

因此，為了回答最初的問題，在符合 ECMAScript 2015 的 TS/JS 中，任何包含 頂層導入或導出的文件都被視為模組。

如果沒有任何頂層匯入或匯出：

1. 它們隨處可見。
2. 它們被視為腳本。

為什麼要使用模組？

不再有全域命名空間污染。這意味著：

1. 模組在自己的作用域內執行。
2. 我們需要明確導出我們想要導出的任何內容。
3. 消費者可以從不同的模組導入他們向其他人公開的內容。

命名導出和預設導出

模組分辨率

在 TS 模組中，解析是從 import 或 require 語句中取得字串，並決定該字串引用哪個檔案的過程。

在 TS 我們有兩種策略：

1. 經典：
   • 預設的。
   • compilerOptions.module 不是「CommonJS」。
   • 包含在內是為了向後相容。
2. 節點：
   • 複製 NodeJS 在 CommonJS 模式下的工作方式。
   • 對 .ts 和 .d.ts 檔案的額外檢查。

順便說一句，我們有很多地方可能會有意或無意地更改它（moduleResolution、baseUrl、paths、rootDirs）。

模組分辨率

• 控制 TS 如何將模組說明符（導入/匯出/require 語句中的字串文字）解析為磁碟上的檔案。
• 應設定為符合目標運行時或捆綁器使用的模組解析器。

例如，如果您正在建立應用程式以利用 ESM（編譯版本正在使用 ESM），那麼您需要在compilerOptions.module 中選擇「NodeNext」。

• 只要我們使用相對路徑檔案副檔名 TS 就可以解析它（例如 import {} from "./a.js"; // ✅ 適用於每個 moduleResolution）。
• 如果您打算編譯應用程式以使用 ESM，那麼您需要指定檔案的副檔名，並且不能無副檔名（例如 import {} from 'a.mjs';）。
• 您也可以匯入一個預計有index.ts檔案的目錄。

注意：如果在該目錄中你有一個 package.json。然後 TS 使用它的 main 和 types 來取得它的類型。

在這裡了解更多。

路徑

所以基本上它會將導入重新映射到查找位置*s* 相對於 baseUrl（如果設定），否則映射到 tsconfig 檔案。最常見的用例是路徑別名：

注意

這對運行時來說沒有任何意義。這意味著您親愛的捆綁器或編譯器需要注意將它們正確地捆綁在一起。如果你的路徑指向不存在的地方，那麼你的應用程式在 NodeJS 執行時將會崩潰。

提示

除此之外，您還可以利用 package.json 的導入（又稱子路徑導入）。

基本網址

• 從中解析裸說明符的基底目錄¹模組名稱
• 比從node_modules查找具有更高的優先權。
• 使用路徑時不再需要設定。

根目錄

• 許多「虛擬」目錄充當單一根。
• 然後編譯器可以解析這些「虛擬」目錄中的相對模組導入，就好像它們被合併到一個目錄中一樣。

編譯後的JS

要影響發出的 JS 輸出，我們可以修改：

• 編譯器選項.目標：
  • 決定將哪些 JS 功能轉換為在較舊的 JavaScript 執行階段中執行。
  • 由我們的應用程式需求決定，例如我將在哪個瀏覽器/NodeJS/Electron 上執行這個編譯的 TS 程式碼。
• 編譯器選項.模組：
  • 系統運作時將使用哪個模組。
  • 對現代 NodeJS 專案使用「nodenext」。它讀取最近的 package.json 檔案並使用其「type」值來決定是否應該使用 CommonJS 還是 ESM。
  • 當您要將其與捆綁程式捆綁時，請使用「esnext」。

回到主題

所以我們想要匯入 .graphql 檔案或其他副檔名，TS 不知道它們是什麼樣的（它無法解析它們的類型）。現在 TS 知道匯入的 svg、graphql 或其他檔案會是什麼樣子。

---

參考。

---

---

1. 裸說明符：導入語句中的模組名稱，不是相對或絕對路徑。這些通常是專案的 node_modules 或其他配置位置中的套件的名稱。 ↩

以上是TS 中的模組聲明的詳細內容。更多資訊請關注PHP中文網其他相關文章！