Typescript 如何避免在 Angular 2 中使用非常长的相对路径进行导入

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. 在这些文件中，重新导出文件夹中的每个文件.

Example

在您的情况下，首先创建一个名为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)，但我发现它的回报与较少的工作结束.进行主要的目录 struct 更改要容易得多，并且减少了必须进行的导入的数量.

Caution

这样做时，有几件事你必须注意，但不能做:

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