打字稿 - 简化导入答案

【问题标题】：Typescript - simplify imports打字稿 - 简化导入
【发布时间】：2016-09-23 01:07:12
【问题描述】：

有没有办法用别名导入模块？例如。我在文件夹common/services/logger/logger.ts 中有角度服务。如何使导入看起来像 import {Logger} from "services" 其中“服务”包含我的所有服务？

我查看了this 和this，但不明白如何使用它。

【问题讨论】：

您想从名为 services 的文件中导入名为 Logger 的类？
我想将我的所有类聚合在一个文件中，并使其可以通过“服务”名称访问。因为当我想导入每个模块时，我真的不想总是写完整路径。
同import {Injectable} from "@angular/core";。所以“@angular/core”是一种别名。有办法吗？
它被称为barrel。 this 可能会做你想做的事
谢谢！它解决了这个问题。是时候在 ionic 2 应用程序中注入 webpack 了 :)

标签： import module typescript angular

【解决方案1】：

为了解决这个问题，我使用了 webpack。如果你想在任何地方导入依赖项，你需要在 webpack 配置中添加别名。例如，您在根目录中有文件夹 shared，其中包含 services 文件夹。文件夹services 应该有index.ts 导出您需要的所有服务（例如Logger）。所以别名是"services" => "shared/services"。

要在 WebStorm 中使用自动完成功能，您只需将 shared 文件夹标记为“资源根目录”。

【讨论】：

我不明白这是如何解决问题的。 services或者其他人怎么知道他要导入Logger，他是怎么从ServiceName得到Logger的？
它只是到随处可用的文件夹的较短路径。你的意思是我需要描述如何配置webpack以及文件夹的结构应该是什么？
我已经更新了我的答案，现在清楚了吗？ ServiceName 实际上是Logger 本身，应该在services 文件夹中的index.ts 中导出。

【解决方案2】：

创建一个包含所有服务的文件并为其命名，例如services.ts。该文件可以被视为一个桶，因为它将包含并导出您的所有服务。该文件可能如下所示：

export * from './logger/logger';
export * from ...;
etc.

现在您可以按如下方式导入此单个文件：

import * as Services from 'common/services';

然后你可以通过Services.Logger访问你的服务，或者直接通过以下方式导入你想要的服务：

import {Logger} from 'common/services';

注意，您已经更改了路径，因为这只是一个示例。有关此技术的更多信息，请查看here。

【讨论】：

我是个懒惰的人 :) 是一样的。有没有办法让所有应用程序都可以访问别名？为了不写import {Logger} from "../../../../services"？
你的意思是所有文件都可以全局访问？
你总是必须导入它。然而，我提出的技术使它更容易，因为您可以导入单个文件，然后使用您的服务。
是的，在全球范围内。那么为什么 typescript 有模块和命名空间呢？有没有别的办法？
不，这就是它的工作原理。导入还不错，让你的所有服务都可以在全球范围内访问对我来说听起来不合适。在需要的地方导入服务。