typescript - 如何避免在 Angular 2 中导入相对路径很长的内容？

Question

我如何引入类似 'my-app-name/services' 的东西来避免像下面导入这样的行？

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

Answer 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 issue 中阅读更多相关信息.还有一个 rootDirs 属性，在使用多个项目时很有用。

Pre TypeScript 2.0(仍然适用于 TS 2.0+)

我发现使用 "barrels" 可以使它变得更容易.

1. 在每个文件夹中，创建一个 index.ts 文件。
2. 在这些文件中，重新导出文件夹内的每个文件。

示例

在您的情况下，首先创建一个名为 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 消除这些工作)，但我发现它最终会以更少的工作得到返回。进行主要的目录结构更改要容易得多，并且它减少了您必须执行的导入次数。

注意

在执行此操作时，有几件事你必须注意但不能做:

1. 您必须注意循环再导出。因此，如果两个子文件夹中的文件相互引用，则您需要使用完整路径。
2. 您不应该从相同的原始文件夹返回文件夹(例如，在验证文件夹中的文件中并执行 import {XyService} from "../validation";)。我发现了这一点，第一点可能导致未定义导入错误。
3. 最后，您不能在一个子文件夹中有两个同名的导出文件。不过通常这不是问题。