在 TypeScript 和 ES6 中，export 和 export default 是用来导出模块成员的两种不同方式。理解它们的区别对于模块化编程非常重要。以下是详细的解释：

export

export 关键字用于导出模块中的多个成员（如变量、函数、类、接口等）。使用 export 导出的成员在导入时需要使用与导出时相同的名称，或使用 as 关键字重命名。

示例

// math.ts
export const PI = 3.14;
export function add(a: number, b: number): number {
    return a + b;
}
export class Calculator {
    multiply(a: number, b: number): number {
        return a * b;
    }
}
// app.ts
import { PI, add, Calculator } from './math';
console.log(PI); // 3.14
console.log(add(2, 3)); // 5
const calc = new Calculator();
console.log(calc.multiply(2, 3)); // 6

使用 as 重命名

// app.ts
import { PI as PiValue, add as sum, Calculator } from './math';
console.log(PiValue); // 3.14
console.log(sum(2, 3)); // 5

export default

export default 用于导出模块中的单个默认成员。每个模块只能有一个默认导出。使用 export default 导出的成员在导入时可以使用任意名称，不需要与导出时的名称相同。

示例

// logger.ts
export default function log(message: string): void {
    console.log(message);
}
// app.ts
import log from './logger';
log('This is a default export log message.');

与命名导出的组合

你可以在同一个模块中同时使用 export default 和 export 来导出默认成员和命名成员。

// utils.ts
export default function log(message: string): void {
    console.log(message);
}
export const PI = 3.14;
export function add(a: number, b: number): number {
    return a + b;
}
// app.ts
import log, { PI, add } from './utils';
log('This is a default export log message.');
console.log(PI); // 3.14
console.log(add(2, 3)); // 5

区别总结

1. 数量限制：

   • export：可以导出多个成员。
   • export default：每个模块只能有一个默认导出。

2. 导入方式：

   • export：导入时需要使用花括号 {} 并且名称需要匹配，或使用 as 重命名。
   • export default：导入时不需要花括号，可以使用任意名称。

3. 使用场景：

   • export：适用于导出多个命名成员的情况。
   • export default：适用于导出单个主成员或模块的核心成员的情况。

例子对比

使用 export 导出多个成员

// math.ts
export const PI = 3.14;
export function add(a: number, b: number): number {
    return a + b;
}
// app.ts
import { PI, add } from './math';
console.log(PI); // 3.14
console.log(add(2, 3)); // 5

使用 export default 导出单个主成员

// logger.ts
export default function log(message: string): void {
    console.log(message);
}
// app.ts
import log from './logger';
log('This is a default export log message.');

组合使用

// utils.ts
export default function log(message: string): void {
    console.log(message);
}
export const PI = 3.14;
export function add(a: number, b: number): number {
    return a + b;
}
// app.ts
import log, { PI, add } from './utils';
log('This is a default export log message.');
console.log(PI); // 3.14
console.log(add(2, 3)); // 5