跳到主要内容

TypeScript 默认导出

在 TypeScript 中，模块是组织和共享代码的基本单元。默认导出（Default Export）是一种特殊的导出方式，它允许一个模块导出一个“主要”的值、函数、类或对象，从而简化导入时的语法。本文将详细介绍 TypeScript 默认导出的概念、用法以及实际应用场景。

什么是默认导出？​

默认导出是 TypeScript 模块系统中的一个特性，它允许一个模块导出一个“默认”的值。与命名导出（Named Export）不同，默认导出不需要指定名称，导入时可以使用任意名称来引用它。

默认导出的语法非常简单，只需在 export 关键字后加上 default 即可：

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

在上面的例子中，add 函数被默认导出。这意味着在导入时，我们可以为它指定任意名称：

typescript
// main.ts
import myAddFunction from './mathUtils';

console.log(myAddFunction(2, 3)); // 输出: 5
提示

默认导出通常用于模块中只有一个主要功能或值的情况。它使得导入时的语法更加简洁。

默认导出的语法​

默认导出可以用于导出任何类型的值，包括函数、类、对象、甚至原始值。以下是几种常见的默认导出方式：

1. 导出函数​

typescript
// logger.ts
export default function log(message: string): void {
  console.log(message);
}

2. 导出类​

typescript
// User.ts
export default class User {
  constructor(public name: string, public age: number) {}
}

3. 导出对象​

typescript
// config.ts
export default {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
};

4. 导出原始值​

typescript
// constants.ts
export default 42;

默认导出的导入方式​

默认导出的导入方式也非常灵活。由于默认导出没有名称，导入时可以为其指定任意名称：

typescript
// main.ts
import log from './logger';
import MyUser from './User';
import appConfig from './config';
import answerToLife from './constants';

log('Hello, TypeScript!'); // 输出: Hello, TypeScript!
const user = new MyUser('Alice', 25);
console.log(appConfig.apiUrl); // 输出: https://api.example.com
console.log(answerToLife); // 输出: 42
警告

虽然可以为默认导出的内容指定任意名称，但为了代码的可读性，建议使用有意义的名称。

默认导出与命名导出的结合使用​

在一个模块中，可以同时使用默认导出和命名导出。这在某些场景下非常有用，例如当一个模块有一个主要功能，同时还有一些辅助功能时：

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

export function subtract(a: number, b: number): number {
  return a - b;
}

在导入时，可以同时导入默认导出和命名导出：

typescript
// main.ts
import add, { subtract } from './mathUtils';

console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2
备注

默认导出和命名导出可以共存，但一个模块只能有一个默认导出。

实际应用场景​

1. 导出 React 组件​

在 React 应用中，通常会将每个组件放在单独的文件中，并使用默认导出：

typescript
// Button.tsx
import React from 'react';

export default function Button({ label }: { label: string }) {
  return <button>{label}</button>;
}

然后在其他文件中导入并使用该组件：

typescript
// App.tsx
import Button from './Button';

function App() {
  return <Button label="Click Me" />;
}

2. 导出配置对象​

在大型应用中，通常会将配置信息放在一个单独的文件中，并使用默认导出：

typescript
// config.ts
export default {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
};

然后在需要的地方导入配置：

typescript
// api.ts
import config from './config';

function fetchData() {
  fetch(config.apiUrl, { timeout: config.timeout })
    .then(response => response.json())
    .then(data => console.log(data));
}

总结​

默认导出是 TypeScript 中一种非常实用的模块导出方式，特别适用于模块中只有一个主要功能或值的情况。它简化了导入时的语法，并使得代码更加清晰易读。通过本文的学习，你应该已经掌握了默认导出的基本用法，并能够在实际项目中灵活运用。

附加资源与练习​

  • 练习 1: 创建一个模块，默认导出一个计算圆面积的函数，并在另一个文件中导入并使用它。
  • 练习 2: 在一个模块中同时使用默认导出和命名导出，分别导出一个主要功能和几个辅助功能，并在另一个文件中导入它们。