Index.ts 都是用来做什么的？

来自 Angular.io v2的存档词汇表中 Barrel^*的条目:

一桶是一种将多个模块的出口汇总成一个单一模块的方法 方便模块。桶本身是一个模块文件，重新导出 其他模块的选定导出。

想象一下“英雄”文件夹中的三个模块:

// heroes/hero.component.ts
export class HeroComponent {}


// heroes/hero.model.ts
export class Hero {}


// heroes/hero.service.ts
export class HeroService {}

如果没有石油，消费者将需要三份进口报表:

import { HeroComponent } from '../heroes/hero.component.ts';
import { Hero }          from '../heroes/hero.model.ts';
import { HeroService }   from '../heroes/hero.service.ts';

我们可以添加一个桶的英雄文件夹(称为索引约定) 出口所有这些项目:

export * from './hero.model.ts';   // re-export all of its exports
export * from './hero.service.ts'; // re-export all of its exports
export { HeroComponent } from './hero.component.ts'; // re-export the named thing

现在消费者可以从桶里进口他们需要的东西。

import { Hero, HeroService } from '../heroes'; // index is implied

每个角度范围的软件包都有一个名为 index 的桶。

参见 例外: 不能解析所有参数

^* 注意: Barrel已从 角度词汇表的最新版本移除。

更新 使用最新版本的 Angular，桶文件应该编辑如下,

export { HeroModel } from './hero.model';
export { HeroService } from './hero.service';
export { HeroComponent } from './hero.component';

index.ts是相似的 index.js在节点或 index.html是网站托管。

因此，当您说 import {} from 'directory_name'时，它将在指定的目录中查找 index.ts，并导入在那里导出的任何内容。

例如，如果将 calculator/index.ts设置为

export function add() {...}
export function multiply() {...}

你可以的

import { add, multiply } from './calculator';

index.ts帮助我们保持所有相关的东西在一起，我们不需要担心源文件的名称。

我们可以通过使用源文件夹名导入所有内容。

import { getName, getAnyThing } from './util';

这里 util 是文件夹名，而不是文件名，其中的 index.ts重新导出所有四个文件。

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';

index.ts通常位于内部文件夹之外。 例如:

my-app/
├─ src/
│  ├─ internal/
│  │  ├─ app.ts
│  ├─ index.ts

假设在 /src/internal/app.ts中，我们想要导入任何函数，例如函数 A。

如果我们没有放置 export * from ./internal/app.ts的 index.ts，当从外部导入函数 A 时，我们的路径将直接进入内部文件夹

import {A} from ./src/internal/app

这应该尽可能避免。

如果我们使用 index.ts，我们的路径就很简单

import {A} from ./src