export default vs export：在TypeScript中该如何选择？

TypeScript export vs default export：一次性彻底搞懂

你好，朋友！如果你刚开始学习TypeScript（或者已经不是新手，但仍然对导出感到困惑），那么这篇文章就是你的救生圈。“TypeScript export vs default export”是Stack Overflow上最热门的话题之一，这并不奇怪。看似小事，却引发了无数争论！让我们来逐一梳理，彻底记住何时使用export，何时使用export default。

我们不会枯燥地罗列规则。我们将通过实际示例、新手常见错误以及具体建议来讲解。开始吧！

什么是TypeScript中的导出，为什么需要它？

想象一下，你在编写一个大型程序。你不会把所有代码都塞进一个文件里吧？当然不会。你会把它拆分成模块：一个文件负责用户管理，另一个负责计算，第三个负责界面。导出是一种告诉TypeScript的方式：“嘿，这个函数、类或变量可以在其他文件中使用。”而导入则是说：“让我从另一个文件中获取这个东西。”

TypeScript中有两种主要的导出方式：命名导出（named export）和默认导出（default export）。有趣的部分就从这里开始。

命名导出（named export）——精确与有序

命名导出是指你明确指定要导出的名称。这就像你在车库里的每个盒子上都贴了醒目的标签：“工具”、“运动器材”、“旧课本”。

语法非常简单。只需在声明前添加关键字export：

命名导出示例

// utils.ts\nexport const PI = 3.14159;\n\nexport function calculateArea(radius: number): number {\n  return PI * radius * radius;\n}\n\nexport class Circle {\n  constructor(public radius: number) {}\n}

现在在另一个文件中导入它们：

// app.ts\nimport { PI, calculateArea, Circle } from './utils';\n\nconsole.log(PI); // 3.14159\nconst area = calculateArea(5);\nconst myCircle = new Circle(10);

注意导入时的花括号{ }。它们是命名导出的明确标志。你可以只导入你需要的内容，并且必须使用导出时指定的相同名称（当然，也可以使用as重命名，稍后会讲到）。

命名导出的优点

\n
• 明确性：你总能清楚地看到模块中导出了什么。
\n
• 自动补全：IDE（例如VS Code）在导入时能很好地提示名称。
\n
• 重构：如果你重命名了导出的函数，IDE会在所有导入它的地方自动重命名。这很安全。
\n
• Tree-shaking：打包工具（Webpack、Vite）可以“摇掉”未使用的代码，减小最终打包体积。
\n

默认导出（default export）——便捷与简洁

默认导出是指你声明：“这个文件中有一个主要实体，我希望它能方便地导入。”这就像你说：“这是我的名片，上面有所有关键信息。”

每个模块中只能有一个默认导出。语法如下：

默认导出示例

// logger.ts\nconst log = (message: string): void => {\n  console.log(`[LOG]: ${message}`);\n};\n\nexport default log;

或者可以直接声明：

export default function log(message: string): void {\n  console.log(`[LOG]: ${message}`);\n}

导入方式如下（没有花括号！）：

// main.ts\nimport myLog from '