如何引入类似 'my-app-name/services' 的内容以避免类似以下导入的行?

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

最佳答案

typescript 2.0+

在 TypeScript 2.0 中,您可以在 baseUrl 中添加一个 tsconfig.json 属性:

{
    "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 属性,在使用多个项目时很有用。

TypeScript 2.0 之前的版本(仍然适用于 TS 2.0+)

我发现使用 "barrels" 可以更容易。
  • 在每个文件夹中,创建一个 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 消除这些工作),但我发现它最终会以更少的工作获得返回。进行主要目录结构更改要容易得多,并且可以减少您必须执行的导入数量。

    注意事项

    执行此操作时,您必须注意一些事情并且不能这样做:
  • 您必须注意循环再导出。因此,如果两个子文件夹中的文件相互引用,则您需要使用完整路径。
  • 你不应该从同一个原始文件夹返回一个文件夹(例如在验证文件夹中的一个文件中并执行 import {XyService} from "../validation"; )。我发现了这一点,第一点可能会导致未定义导入的错误。
  • 最后,一个子文件夹中不能有两个同名的导出。不过通常这不是问题。
  • 关于typescript - 如何避免在 Angular 2 中使用非常长的相对路径进行导入?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34925992/

    10-16 15:51
    查看更多