理解 Named Export 和 Default Export

Named Export

Named Export 用于从模块中导出多个变量、函数或类。每个导出的元素都有一个名称，通过它你可以选择性地只导入需要的部分。

例如，你可以这样编写代码：

// utils.js
export const PI = 3.14;

export function add(a, b) {
  return a + b;
}

export class Calculator {
  subtract(a, b) {
    return a - b;
  }
}

像上面这样导出后，在使用的位置可以像下面这样导入：

// main.js
import { PI, add, Calculator } from './utils.js';

console.log(PI); // 3.14
console.log(add(2, 3)); // 5

const calc = new Calculator();
console.log(calc.subtract(5, 2)); // 3

Default Export

Default Export 用于从模块中导出单个默认值。每个模块只能有一个 Default Export，导入时可以自由指定名称。

像这样导出：

// logger.js
export default function log(message) {
  console.log(message);
}

然后像这样导入：

// app.js
import log from './logger.js';

log('你好！'); // 你好！

主要区别

1. 导出数量
   • Named Export: 可以有多个
   • Default Export: 每个模块只能有一个
2. 导入语法
   • Named Export: import { name1, name2 } from './module';
   • Default Export: import anyName from './module';
3. 重命名
   • Named Export: import { originalName as newName } from './module';
   • Default Export: 导入时可以自由命名
4. 全部导入
   • Named Export: import * as moduleName from './module';
   • Default Export: 已经被视为单个对象，因此不需要全部导入
5. 动态导入
   • Named Export: import('./module').then(module => module.namedExport)
   • Default Export: import('./module').then(module => module.default)

应该在什么时候使用哪一个？

• Named Export: 当你想从模块中导出多个工具函数或变量，并希望选择性地导入使用时非常有用。
• Default Export: 用于导出模块的主要功能或类时效果很好。

避免使用 Default Export

该文档 建议避免使用 Default Export（至少在 TypeScript 项目中是这样）。主要原因如下：

不支持重命名

在 IDE 中通过重构功能重命名时，它不会自动更改。例如，即使将 TestComponent 的名称更改为 TestComponent2，在导入部分也不会更改。但是，如果使用 Named Export，它会正确更新。

命名过于自由导致的一致性不足

• 使用 default export 时，导入时可以使用任何名称，这可能导致同一个模块在不同的文件中以不同的名称使用。
• 这会破坏代码的一致性并引起混乱。

缺乏类型信息

• default export 不提供类型信息，因此导出的对象或函数的类型可能不明确.