面试题：TypeScript模块系统中，如何实现模块的默认导出与命名导出，两者有何区别？

Question

请举例说明TypeScript中模块的默认导出和命名导出的语法，并阐述在使用场景和导入方式上它们有哪些不同。

Answer 1

默认导出

• 语法：在模块中使用 export default 关键字。例如：

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

• 导入方式：使用 import 关键字，导入时可以自定义名称。例如：

import sum from './mathUtils';
console.log(sum(1, 2)); 

• 使用场景：适用于模块中只有一个主要的导出内容，比如一个主要的函数、类或对象。这样在导入时可以用更简洁的方式获取该主要内容。

命名导出

• 语法：使用 export 关键字，或先声明后在模块末尾导出。例如：

// mathUtils.ts
export const add = (a: number, b: number) => a + b;
export const subtract = (a: number, b: number) => a - b;
// 或者
const multiply = (a: number, b: number) => a * b;
const divide = (a: number, b: number) => a / b;
export { multiply, divide };

• 导入方式：使用 import 关键字并指定要导入的名称。例如：

import { add, subtract } from './mathUtils';
console.log(add(5, 3)); 
console.log(subtract(5, 3)); 

也可以使用别名导入：

import { multiply as times, divide as divideFunction } from './mathUtils';
console.log(times(2, 3)); 
console.log(divideFunction(6, 3)); 

还可以使用 * 导入所有命名导出并作为一个对象：

import * as math from './mathUtils';
console.log(math.add(1, 2)); 
console.log(math.multiply(3, 4)); 

• 使用场景：适用于模块中有多个相关的导出内容，需要明确地导入特定的功能。这样在导入时可以选择性地获取所需的功能，提高代码的灵活性和可维护性。