时间戳

首页 > 解决方案 > 将“import * as”与 index.ts 结合使用

typescript - 将“import * as”与 index.ts 结合使用

问题描述

我正在阅读一篇关于在模块化 Angular 开发中使用 index.ts 文件的文章。我发现它相当有用。这可以大大减少导入语句的数量。但它要求您将所有引用的组件包含在一行中。

所以当我们最初有

import {BusinessLogicComponent} from '../shared/ang-graph/shapes/business-logic.component';
import {BusinessLogicModel} from '../shared/ang-graph/shapes/business-logic.model';
import {PageReferenceComponent} from '../shared/ang-graph/shapes/page-reference.component';
import {PageReferenceModel} from '../shared/ang-graph/shapes/page-reference.model';
import {RestRequestComponent} from '../shared/ang-graph/shapes/rest-request.component';
import {RestRequestModel} from '../shared/ang-graph/shapes/rest-request.model';

我们可以将其减少到

import {BusinessLogicComponent, BusinessLogicModel, PageReferenceComponent, PageReferenceModel, RestRequestComponent, RestRequestModel} from '../shared/ang-graph/shapes';

但这给出了很长的代码行，实际上并不可读。

所以我想知道是否可以将上述简化的导入语句替换为例如：

import * as GraphShapes from '../shared/ang-graph/shapes';

这使所有内容再次变得更具可读性，另外还可以更好地了解代码中组件的来源。

所以

const pageRef = new PageReferenceModel('page1', def, 'some-prop');

会成为

const pageRef = new GraphShapes.PageReferenceModel('page1', def, 'some-prop');

我认为这在代码中更清楚，但我不确定这种方法是否有不好的副作用，例如导入太多组件或......

那么，这是一个使用的好习惯吗

import * as [GroupName] from 'path/to/code/folder';

结合index.ts文件？

标签： typescriptimportmodule

解决方案

使用index.ts列出代码包的“公共接口”是个好主意。

尽管从长期代码库维护的角度来看 *-imports 并不是那么好：在大型包index.ts可能包含数十个导出元素的情况下，*-import 会使代码导航变得更加困难。

如果您导入特定名称 - 团队中的任何人都可以跟踪在每个文件中导入了哪些类/函数。

推荐阅读