如何在 TypeScript（或 JavaScript）中添加桶形控件
你好！
本文简要介绍如何在 TypeScript 中创建有效的导入/导出策略。虽然这并非 TypeScript 独有的功能，但本文将以 TypeScript 环境为例进行说明。
The goal of this is to make the code more readable and maintainable once it gets it bigger and bigger.
桶是一种将所有相同类型或相同用途的文件放在同一位置的方法，然后使用一个唯一的文件同时导入和导出它们。
例子
情况是这样的。我们的项目文件夹中有 3 个接口，项目根目录下有interfaces一个文件导入了这些接口。index.ts
index.ts
interfaces/
bear.interface.ts
pig.interface.ts
man.interface.ts
// index.ts
import { Bear } from './interfaces/bear.interface';
import { Pig } from './interfaces/pig.interface';
import { Man } from './interfaces/man.interface';
这三个文件唯一的共同点就是它们都包含接口。
如您所见，我们有 3 条导入语句。这是一种常见且正常的做法。
使用木桶。
这就是引入桶状结构时的场景。我们可以对结构稍作修改，就能以更易读的方式进行导入。您必须遵循以下三个步骤。
- 添加一个桶形锉刀。
在 interfaces 文件夹中添加索引。
index.ts
interfaces/
bear.interface
pig.interface
man.interface
index.ts <--- Barrel file
- 导入所有接口，然后将它们导出到同一个文件中。
// ./interfaces/index.ts
export * from './bear.interface';
export * from './man.interface';
export * from './pig.interface';
- 更新
imports项目索引文件根目录中的语句。
// **BEFORE**
// index.ts
import { Bear } from './interfaces/bear.interface';
import { Pig } from './interfaces/pig.interface';
import { Man } from './interfaces/man.interface';
// **NOW**
// index.ts
import { Bear, Pig, Man } from './interfaces';
包起来
这种桶式方法虽然不能解决一个大问题，但可以避免代码库变大时代码可读性下降的问题。
你也可以在JS和TS上建立桶。
今天就到这里。
祝您编程愉快！
文章来源：https://dev.to/luispa/how-to-create-barrels-in-typescript-or-javascript-59ma