面试题：TypeScript中混合使用命名导出与默认导出的场景及注意事项

Question

在一个大型TypeScript项目中，可能会出现同时需要使用命名导出与默认导出的情况。请描述至少两种这样的实际场景，并说明在混合使用时可能会遇到哪些问题以及如何解决。

Answer 1

实际场景

1. 工具函数与核心组件导出
   • 项目中有一组通用的工具函数，每个函数都有其特定用途，适合使用命名导出，方便在不同模块中选择性导入。例如，mathUtils.ts文件中包含add、subtract等函数：

export function add(a: number, b: number): number {
    return a + b;
}
export function subtract(a: number, b: number): number {
    return a - b;
}

同时，该项目有一个核心的主组件，这个组件在大多数情况下是项目的主要使用对象，适合默认导出。如MainComponent.tsx：

import React from'react';
const MainComponent: React.FC = () => {
    return <div>Main Component</div>;
};
export default MainComponent;

2. 模块配置与主要功能导出
   • 在配置模块中，可能有多个配置项以命名导出形式提供，方便不同模块根据需求获取特定配置。比如config.ts：

export const apiBaseUrl = 'https://example.com/api';
export const defaultTimeout = 5000;

而该模块同时提供一个主要的初始化函数作为默认导出，用于整个模块的初始化操作：

export default function initialize() {
    // 初始化逻辑
}

可能遇到的问题及解决方法

1. 导入语法混淆问题
   • 问题描述：开发者可能会混淆命名导出和默认导出的导入语法。对于命名导出，需要使用花括号来指定导入的名称；而默认导出直接使用自定义名称导入。如果混淆，会导致导入错误。例如：

// 错误示例，对默认导出使用了命名导出的导入语法
import {MainComponent} from './MainComponent'; 

// 正确示例
import MainComponent from './MainComponent'; 

- **解决方法**：在团队开发规范中明确强调两种导出方式的导入语法区别，并且在代码审查过程中注意检查导入语法是否正确。同时，编辑器可以配置相关插件，对错误的导入语法进行提示。

2. 名称冲突问题 - 问题描述：当不同模块的命名导出名称相同，或者命名导出与默认导出的名称在导入时发生冲突，会导致错误。例如，两个不同模块module1.ts和module2.ts都有命名导出utils：

// module1.ts
export const utils = {
    // 一些工具函数定义
};

// module2.ts
export const utils = {
    // 另一套工具函数定义
};

当在同一个模块中导入这两个utils时就会冲突。 - 解决方法：在导入时使用别名来区分。例如：

import {utils as module1Utils} from './module1';
import {utils as module2Utils} from './module2';

3. 代码结构和可读性问题
   • 问题描述：过度混合使用命名导出和默认导出可能会使模块的代码结构变得混乱，增加阅读和维护成本。特别是当模块功能复杂，导出内容较多时，难以快速分辨每个导出的用途。
   • 解决方法：保持模块功能的单一性，尽量减少在一个模块中同时使用过多的命名导出和默认导出。对于复杂模块，可以考虑拆分成多个子模块，每个子模块专注于特定功能，并且采用一致的导出方式。同时，编写详细的注释，说明每个导出的用途和使用场景。