Question

我正在阅读有关Modular Angular开发中the use of index.ts files的文章。我觉得它很有用。这可以大大减少导入语句的数量。但它要求您将所有引用的组件包含在一行中。

所以当我们最初有

时

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语句

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个文件结合使用？

Answer 1

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

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

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

将'import * as'与index.ts结合使用

1 个答案: