TypeScript中命名导出与默认导出的区别

在JavaScript/TypeScript模块系统中，有两种主要的导出方式：命名导出（Named Export）和默认导出（Default Export）。每种方式都有其特定的使用场景和语法规则。

命名导出（Named Export）

命名导出允许你从一个模块中导出多个变量、函数或类，每个都有其特定的名称。

语法

 

// 直接导出声明
export const foo = 'foo';
export function bar() { return 'bar'; }
export class Baz { }

// 或者先声明后导出
const foo = 'foo';
function bar() { return 'bar'; }
class Baz { }

export { foo, bar, Baz };

 

导入方式

// 导入特定的命名导出
import { foo, bar, Baz } from './module';

// 可以使用别名
import { foo as myFoo } from './module';

// 导入所有命名导出
import * as module from './module';
// 使用：module.foo, module.bar, module.Baz

默认导出（Default Export）

默认导出允许你从一个模块中导出一个默认值。每个模块只能有一个默认导出。

语法

// 导出一个值作为默认导出
export default 'foo';
export default function() { return 'bar'; }
export default class { }

// 或者导出一个对象作为默认导出
const foo = 'foo';
function bar() { return 'bar'; }
class Baz { }

export default { foo, bar, Baz };

导入方式

// 导入默认导出（名称可以自定义）
import anyName from './module';

// 当导出是包含多个属性的对象时
import module from './module';
// 使用：module.foo, module.bar, module.Baz

// 也可以结合解构使用（但需要注意这不是从模块直接解构）
import module from './module';
const { foo, bar } = module;

 

两者主要区别

1. 数量限制：

• 命名导出：一个模块可以有多个命名导出

• 默认导出：一个模块只能有一个默认导出

2. 导入语法：

• 命名导出：import { name } from './module'（使用花括号）

• 默认导出：import name from './module'（不使用花括号）

3. 名称一致性：

• 命名导出：导入时必须使用与导出时相同的名称（除非使用别名）

• 默认导出：导入时可以使用任意名称

4. 静态分析：

• 命名导出：编译器可以更好地进行静态分析和摇树优化（tree-shaking）

• 默认导出：对于导出对象，静态分析较难，不利于摇树优化

5. IDE支持：

• 命名导出：IDE提供更好的自动完成和提示

• 默认导出：对于导出对象的属性，IDE支持较弱

使用场景

命名导出适合：

• 导出多个相关但独立的功能

• 需要更好的静态分析和摇树优化

• 库和工具类模块，提供多种不同的功能

默认导出适合：

• 模块主要提供单一功能（如React组件）

• 希望导入者自由命名导入内容

• 简化导入语法

最佳实践

1. 一致性原则：在项目中保持导出风格的一致性

2. 合理选择：根据模块的性质和用途选择合适的导出方式

3. 避免混用：虽然可以在同一模块中混合使用两种导出，但容易造成混淆

简单示例对比

命名导出示例

// math.ts
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;

// 使用
import { add, multiply } from './math';
console.log(add(2, 3));  // 5

默认导出示例

// user.ts
export default class User {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() {
    return `Hello, I'm ${this.name}`;
  }
}

// 使用
import Person from './user';  // 可以使用任意名称
const person = new Person('Alice');

 

通过理解这两种导出方式的区别，开发者可以更好地组织代码结构，提高代码的可维护性和可读性。