typescript - 如何在 Angular 2 中避免使用非常長的相對路徑導入？

我如何引入類似 'my-app-name/services' 的東西，以避免像以下這樣的 import 行？

import {XyService} from '../../../services/validation/xy.service';

答案＃1

TypeScript 2.0 以上

在 TypeScript 2.0 中，你可以在 tsconfig.json 中添加一個 baseUrl 屬性：

{
    "compilerOptions": {
        "baseUrl": "."
        // etc...
    },
    // etc...
}

然後你就可以像在基礎目錄中一樣導入所有內容：

import {XyService} from "services/validation/xy.service";

除此之外，你可以添加一個 paths 屬性，這個屬性允許你匹配一個模式，然後將其映射出來。例如：

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "services/*": [
                "services/validation/*"
            ]
        }
        // etc...
    },
    // etc...
}

這將允許你像這樣從任何地方導入它：

import {XyService} from "services/xy.service";

從那裡，你將需要配置你正在使用的任何模組加載器以支持這些匯入名稱。目前 TypeScript 編譯器似乎不會自動映射這些名稱。

您可以在 GitHub 問題中閱讀更多相關資訊。當使用多個專案時，也有一個 rootDirs 屬性非常有用。

TypeScript 2.0 之前（在 TS 2.0+ 中仍適用）

我發現使用「桶」可以讓它變得更容易。

在每個資料夾中，建立一個 index.ts 檔案。
在這些檔案中，重新導出資料夾內的每個檔案。

範例

在你的情況下，首先建立一個名為 my-app-name/services/validation/index.ts 的檔案。在這個檔案中，請寫入以下程式碼：

export * from "./xy.service";

然後建立一個名為 my-app-name/services/index.ts 的檔案，並輸入以下程式碼：

export * from "./validation";

現在你可以像這樣使用你的服務（index 是隱含的）:

import {XyService} from "../../../services";

一旦你在那裡有多個檔案，事情就變得更容易了：

import {XyService, MyOtherService, MyOtherSerivce2} from "../../../services";

必須維護這些額外的檔案在前期需要更多工作（可以使用 barrel-maintainer 來消除這些工作），但我發現最終會因為工作量減少而得到回報。進行主要目錄結構的變更會容易得多，同時也減少了你需要做的導入次數。

注意

在做這件事時，有幾件事情你必須注意，且不能做：

你必須注意循環重新導出。因此，如果兩個子資料夾中的文件互相引用，那麼你需要使用完整路徑。
你不應該從相同的原始資料夾回到上一層資料夾（例如，位於 validation 資料夾中的一個檔案並執行 import {XyService} from "../validation";）。我發現這個以及第一點可能會導致匯入未定義的錯誤。
最後，你不能在子資料夾中有兩個同名的匯出。不過通常這不會是個問題。

答案＃2

最好在 tsconfig.json 中使用以下配置

{
  "compilerOptions": {
    "...": "reduced for brevity",

    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"]
    }
  }
}

在 Angular 6 之前的傳統方式：

`import {XyService} from '../../../services/validation/xy.service';`

應該重構為這些：

import {XyService} from '@app/services/validation/xy.service

簡短而甜美！