在使用 TypeScript 開發時，如何解決 pnpm 創建的項目中 math 包的模塊解析和聲明文件合并問題？

typescript：pnpm 項目中 math 包的模塊解析與聲明文件沖突

本文探討在使用 pnpm 的 TypeScript 項目中，如何解決 math 包的模塊解析和聲明文件合并問題，特別是當擴展 math 包的類型聲明時遇到的沖突。

問題場景

在一個使用 pnpm 創建的項目中，我們成功引入了 math 包并正常使用。然而，當我們嘗試擴展 math 包的 divide 函數類型聲明，并創建 math-extensions.d.ts 文件后，出現了模塊覆蓋問題，導致 VS Code 報錯。

疑問解答

疑問一：declare module 不應該合并聲明嗎？為什么 VS Code 報錯？

declare module 的確意圖合并聲明，但問題在于 TypeScript 編譯器加載聲明文件的順序和優先級。如果 math-extensions.d.ts 的加載優先級高于 math 包自帶的聲明文件，就會發生覆蓋，導致錯誤。

疑問二：使用非相對導入，為什么 math-extensions.d.ts 會生效？

雖然非相對導入優先查找 node_modules，但 TypeScript 編譯器也會根據 tsconfig.json 中的 baseUrl 和 include 配置查找項目中的聲明文件。如果 math-extensions.d.ts 位于 include 指定的目錄下，且 baseUrl 為項目根目錄，則會被加載。

解決方案

解決方法主要集中在避免聲明文件沖突和控制加載順序：

1. 重命名或調整聲明文件位置: 將 math-extensions.d.ts 文件重命名，或移動到一個不會與 math 包聲明文件沖突的目錄，例如創建一個 types 目錄專門存放自定義類型聲明。

2. 配置 tsconfig.json 的 paths: 通過 paths 配置，明確指定 math 模塊的解析路徑，優先加載 node_modules 中的聲明文件。例如：

   {   "compilerOptions": {     "outDir": "dist",     "baseUrl": ".",     "moduleResolution": "node",     "paths": {       "math": ["node_modules/math"]     }   },   "include": ["src/**/*"] }

   此配置確保 TypeScript 編譯器在解析 math 模塊時，優先從 node_modules 目錄加載其聲明文件，避免被 math-extensions.d.ts 覆蓋。

通過以上方法，可以有效解決 TypeScript 模塊解析和聲明文件合并問題，確保項目順利編譯運行。 記住，清晰的項目結構和合理的 tsconfig.json 配置是避免此類問題的關鍵。