面试题：TypeScript模块化导出功能之中等难度题

Question

在TypeScript中，有命名导出和默认导出两种方式。请分别举例说明如何使用这两种导出方式，并阐述它们在使用场景上有哪些区别。

Answer 1

命名导出

1. 导出示例： 在 mathUtils.ts 文件中：

export const add = (a: number, b: number) => a + b;
export const subtract = (a: number, b: number) => a - b;

2. 导入示例： 在 main.ts 文件中：

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

默认导出

1. 导出示例： 在 person.ts 文件中：

const person = {
    name: 'John',
    age: 30
};
export default person;

2. 导入示例： 在 main.ts 文件中：

import myPerson from './person';
console.log(myPerson.name); 

使用场景区别

1. 命名导出：
   • 适用于：一个模块需要导出多个相关的功能或值，例如一个工具函数模块，像上面的数学计算工具模块，导出多个计算函数。每个导出项都有自己明确的名称，导入时可以按需导入特定的功能，提高代码的灵活性和可维护性。
2. 默认导出：
   • 适用于：模块主要导出一个“主”对象、函数或值的情况。例如一个模块定义了一个单一的类、配置对象等。导入时不需要花括号，语法更简洁，更符合直观的导入习惯，尤其是当模块只导出一个主要内容时。