面试题：TypeScript模块化下如何优化代码复用并避免命名冲突

1. 命名空间与模块组织

命名空间（Namespaces）：在TypeScript早期版本中，命名空间用于组织代码并避免命名冲突。例如，在一个电商项目中，可能有Cart和Product相关功能。可以创建如下命名空间：

namespace Cart {
    export function addItem(item: any) {
        // 具体实现
    }
}

namespace Product {
    export function getProductDetails(id: number) {
        // 具体实现
    }
}

这样，Cart和Product中的函数和变量不会互相冲突。但现代TypeScript项目更推荐使用ES6模块。

ES6模块：使用ES6模块系统，每个文件就是一个模块。例如，创建cart.ts和product.ts文件。在cart.ts中：

export function addItem(item: any) {
    // 具体实现
}

在product.ts中：

export function getProductDetails(id: number) {
    // 具体实现
}

然后在需要使用的地方导入：

import { addItem } from './cart';
import { getProductDetails } from './product';

2. 模块导出策略

具名导出（Named Exports）：适用于一个模块有多个相关功能导出。如在utils.ts文件：

export function formatDate(date: Date) {
    // 格式化日期
}

export function formatNumber(number: number) {
    // 格式化数字
}

在其他模块导入时：

import { formatDate, formatNumber } from './utils';

默认导出（Default Export）：当一个模块主要导出一个特定功能时使用。例如，在userService.ts文件：

class UserService {
    // 具体方法
}

export default UserService;

导入时：

import UserService from './userService';

3. 第三方工具与最佳实践

使用工具辅助：像Webpack这样的构建工具，可以帮助处理模块的打包和优化。它能确保模块以正确的方式加载和解析，同时可以通过配置避免命名冲突。例如，Webpack的externals配置可以将某些库排除在打包之外，避免与项目内模块命名冲突。
遵循命名规范：制定团队统一的命名规范，比如模块文件名采用kebab - case命名，导出的函数和类采用camelCase命名等。这样可以从代码结构和命名上减少潜在的冲突可能性。例如，对于一个处理订单的模块文件命名为order - service.ts，导出的类命名为OrderService。
使用类型别名和接口：在导出函数或类时，通过类型别名和接口来明确其类型，这样不仅能提高代码的可读性，还能在一定程度上避免因类型不清晰导致的命名冲突。例如：

// types.ts
export interface User {
    name: string;
    age: number;
}

// userService.ts
import { User } from './types';
export function getUserById(id: number): User {
    // 具体实现
}

星途面试题库

面试题：TypeScript模块化下如何优化代码复用并避免命名冲突

知识考点

面试题答案

1. 命名空间与模块组织

2. 模块导出策略

3. 第三方工具与最佳实践