typescript export default导出默认

typescript export default导出默认

TypeScript是一种静态类型的JavaScript扩展，它增加了诸如类型声明、接口、类等功能，使得代码更加健壮和可维护。在TypeScript中，我们经常需要导出模块以供其他文件使用，其中一种方式就是使用默认导出。

什么是默认导出？

默认导出是指将一个模块中的一个变量、函数或类指定为默认导出，在引入该模块时可以使用import语句而不需要在花括号中指定变量名。默认导出使用export default语法来实现。

如何使用默认导出？

假设我们有一个名为utils.ts的模块，其中包含一个函数sum，我们想将该函数默认导出，可以这样编写代码：

// utils.ts
const sum = (a: number, b: number) => a + b;
export default sum;

然后在另一个文件中引入该模块并使用默认导出：

// index.ts
import sum from './utils';

console.log(sum(1, 2)); // 输出: 3

在上面的示例中，我们在utils.ts中使用export default sum;将sum函数导出为默认导出。在index.ts中使用import sum from './utils';引入了sum函数，并直接使用它。

多次使用默认导出

一个模块可以有多个默认导出，但只能有一个默认导出是顶级的。如果一个模块有多个默认导出，那么每个默认导出都必须包装在一个命名导出内。以下是一个示例：

// utils.ts
const sum = (a: number, b: number) => a + b;
const subtract = (a: number, b: number) => a - b;

export default sum;
export { subtract };

在上面的示例中，我们在utils.ts中使用export default sum;将sum函数导出为默认导出，并使用export { subtract };将subtract函数导出为命名导出。在另一个文件中引入这两个函数：

// index.ts
import sum, { subtract } from './utils';

console.log(sum(1, 2)); // 输出: 3
console.log(subtract(5, 3)); // 输出: 2

默认导出的别名

有时候我们可能想为默认导出指定一个别名，可以使用as关键字来实现。以下是一个示例：

// utils.ts
const sum = (a: number, b: number) => a + b;
export { sum as add };

在这个示例中，我们将sum函数默认导出，但是给它指定了一个别名add。在另一个文件中引入这个别名：

// index.ts
import { add } from './utils';

console.log(add(1, 2)); // 输出: 3

总结

本文介绍了TypeScript中默认导出的概念和用法，包括如何导出默认导出、多次使用默认导出和默认导出的别名。默认导出是一种方便的方式，可以减少引入模块时的代码量，提高代码的可读性和维护性。