如何引入类似 '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/