面试题：TypeScript 项目中模块导入导出的常见方式及区别

Question

在TypeScript项目中，阐述使用`export default`和`export`分别进行导出，以及`import`导入时的不同方式和应用场景。例如，假设有一个模块包含用户信息相关功能，如何分别通过这两种导出方式，将用户信息获取函数提供给其他模块使用，并在导入模块中正确使用该函数。

Answer 1

使用 export default

1. 导出方式： 在模块文件（假设为 userInfo.ts）中，定义用户信息获取函数并使用 export default 导出。

// userInfo.ts
const getUserInfo = () => {
    return { name: 'John', age: 30 };
};
export default getUserInfo;

2. 导入方式： 在其他模块导入时，可以使用任意名称来接收导出的函数。

// main.ts
import userInfoFunction from './userInfo';
const user = userInfoFunction();
console.log(user);

3. 应用场景： 当一个模块主要导出一个特定的功能、对象或函数时，使用 export default 比较方便，导入时可以使用自定义的有意义的名称，使得代码更加直观，适用于单个核心功能的模块。

使用 export

1. 导出方式： 方式一：在函数定义前直接使用 export 关键字。

// userInfo.ts
export const getUserInfo = () => {
    return { name: 'John', age: 30 };
};

方式二：先定义函数，然后在文件末尾统一导出。

// userInfo.ts
const getUserInfo = () => {
    return { name: 'John', age: 30 };
};
export { getUserInfo };

2. 导入方式： 导入时需要使用与导出时相同的名称。

// main.ts
import { getUserInfo } from './userInfo';
const user = getUserInfo();
console.log(user);

也可以使用别名导入。

// main.ts
import { getUserInfo as getInfo } from './userInfo';
const user = getInfo();
console.log(user);

3. 应用场景： 当一个模块需要导出多个相关的功能、对象或函数时，使用 export 更合适，这样可以清晰地组织和管理模块的接口，其他模块导入时能明确知道导入的具体内容。