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

​

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

​

---

​

## **1. `export default` 基本用法**

### **（1）导出默认值**

```ts

// math.ts

export default function add(a: number, b: number): number {

  return a + b;

}

```

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

​

### **（2）导入默认值**

```ts

// 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`**

```ts

// utils.ts

export function add(a: number, b: number): number {

  return a + b;

}

export function subtract(a: number, b: number): number {

  return a - b;

}

```

导入时：

```ts

import { add, subtract } from "./utils"; // 必须用 { } 包裹

console.log(add(5, 3)); // 8

console.log(subtract(5, 3)); // 2

```

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

```ts

import { add as sum } from "./utils";

console.log(sum(2, 3)); // 5

```

​

### **（2）`export default` 和 `export` 一起使用**

```ts

// 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;

}

```

导入时：

```ts

import multiply, { divide } from "./utils";

console.log(multiply(2, 3)); // 6

console.log(divide(6, 2)); // 3

```

- `multiply` 是默认导出 → 可以直接导入，不用 `{}`。

- `divide` 是命名导出 → 必须用 `{}`。

​

---

​

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

### **（1）导出 React 组件**

```tsx

// components/Button.tsx

import React from "react";

​

export default function Button() {

  return <button>Click me</button>;

}

```

### **（2）导入组件**

```tsx

// App.tsx

import Button from "./components/Button"; // 默认导入，名字随意

export default function App() {

  return <Button />;

}

```

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

```tsx

import MyButton from "./components/Button";

```

​

---

​

## **总结**

- `export default` **导出模块的默认值**，导入时可以随意命名。

- `export` **命名导出**，必须用 `{}` 导入，名称必须匹配。

- `export default` **每个文件只能有一个**，但可以与 `export` **同时存在**。

- 在 **React + TypeScript** 项目中，`export default` **常用于导出组件**，如 `export default function MyComponent()`。

​

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