如何使用TypeScript简化组件的导入与导出？

方案1：直接批量导出（推荐） #

无需先逐个导入再导出，直接在入口文件中通过export { default as 组件名 } from '组件路径'的写法完成导出，省去重复声明变量的步骤：

export { default as Notification } from "./Notification";
export { default as Confirmation } from "./Confirmation";
export { default as Button } from './Button';
export { default as Input } from './Input';
export { default as Dropdown } from "./Dropdown";
export { default as Add } from "./Add";

新增组件时只需添加一行对应导出语句即可，效果和原写法完全一致。

方案2：统一采用命名导出规范 #

调整组件文件的导出逻辑，将默认导出改为命名导出。比如在Notification.tsx中：

export const Notification = () => { /* 组件实现代码 */ };

之后在入口文件中就能用更简洁的批量导出语法：

export * from "./Notification";
export * from "./Confirmation";
export * from "./Button";
export * from "./Input";
export * from "./Dropdown";
export * from "./Add";

这种方式适合团队统一组件导出规范的场景，后续维护只需确保新组件遵循相同规则即可。

方案3：基于目录结构的桶文件扩展（进阶） #

若组件数量极多且结构复杂，可通过目录拆分优化：将每个组件放在单独文件夹内，文件夹内的index.ts负责导出组件，再在根入口文件批量导出这些文件夹。

示例目录结构：

components/
├── Notification/
│   ├── index.ts
│   └── Notification.tsx
├── Confirmation/
│   ├── index.ts
│   └── Confirmation.tsx
└── index.ts

组件文件夹内的index.ts：

// components/Notification/index.ts
export { default as Notification } from './Notification';

根入口文件components/index.ts：

export * from "./Notification";
export * from "./Confirmation";
// 其他组件同理

这种方式让组件结构更清晰，适合需要拆分多个子文件的复杂组件场景。

注：原生JS/TS没有自动遍历文件导出的功能，上述方案均基于静态导出规范优化，既减少重复代码，也能完整保留类型系统支持。

内容的提问来源于stack exchange，提问作者nevoni3008