打字稿-简化导入

Question

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

我看着这个和这个 ，但不明白我怎么可以使用它。

Answer 1

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

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

现在，您可以按以下方式导入该文件：

import * as Services from 'common/services';

然后，您可以通过Services.Logger访问您的Services.Logger ，或通过以下方式直接导入所需的服务：

import {Logger} from 'common/services';

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

Answer 2

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

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