export default 是什么？

export default 是 ES6 模块系统（ES Modules）中的语法，用于导出模块的默认值，这样其他文件可以更方便地导入这个模块。

在 TypeScript（TS）和 React（TSX）中，export default 常用于 导出组件、函数、类等，使得导入时可以自定义名称。

---

1. export default 基本用法

（1）导出默认值

// math.ts
export default function add(a: number, b: number): number {
  return a + b;
}

这里 add 函数是 默认导出，意味着导入时可以使用 任何名称。

（2）导入默认值

// main.ts
import sum from "./math";  // 可以用任何名称
console.log(sum(2, 3)); // 5

即使 math.ts 里导出的是 add，在 main.ts 中导入时可以随意命名为 sum。

---

2. export default VS export

除了 export default，ES6 还支持 命名导出（export），两者的主要区别如下：

	export default	export（命名导出）
导入时是否能更改名称	✅ 可以随意命名	❌ 必须用原名称或 {}
是否支持多个导出	❌ 只能有一个默认导出	✅ 可以有多个命名导出
导入方式	import anyName from 'module'	import { specificName } from 'module'

（1）命名导出 export

// utils.ts
export function add(a: number, b: number): number {
  return a + b;
}
export function subtract(a: number, b: number): number {
  return a - b;
}

导入时：

import { add, subtract } from "./utils"; // 必须用 { } 包裹
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2

如果要更改名称，需要用 as：

import { add as sum } from "./utils";
console.log(sum(2, 3)); // 5

（2）export default 和 export 一起使用

// utils.ts
export default function multiply(a: number, b: number): number {
  return a * b;
}
export function divide(a: number, b: number): number {
  return a / b;
}

导入时：

import multiply, { divide } from "./utils";
console.log(multiply(2, 3)); // 6
console.log(divide(6, 2)); // 3

• multiply 是默认导出 → 可以直接导入，不用 {}。
• divide 是命名导出 → 必须用 {}。

---

3. 在 React (TSX) 组件中的应用

（1）导出 React 组件

// components/Button.tsx
import React from "react";

export default function Button() {
  return <button>Click me</button>;
}

（2）导入组件

// App.tsx
import Button from "./components/Button"; // 默认导入，名字随意
export default function App() {
  return <Button />;
}

这里 Button 组件是默认导出，导入时可以 随意命名（比如 MyButton）：

import MyButton from "./components/Button";

---

总结

• export default 导出模块的默认值，导入时可以随意命名。
• export 命名导出，必须用 {} 导入，名称必须匹配。
• export default 每个文件只能有一个，但可以与 export 同时存在。
• 在 React + TypeScript 项目中，export default 常用于导出组件，如 export default function MyComponent()。

你现在写的是 TSX 代码，在 export default 里导出的组件可以直接用 import 语法来使用！