面试题：TypeScript函数重载在大型前端项目架构中的优化实践

Question

描述你在一个大型前端项目中，如何运用TypeScript函数重载来优化代码结构与提高可维护性。比如在一个多模块、多团队协作开发的项目中，函数重载是如何解决接口兼容性、数据类型一致性等问题的。请详细阐述项目背景、遇到的问题以及通过函数重载实现的解决方案和带来的收益。

Answer 1

项目背景

在一个大型电商前端项目中，涉及多模块如商品展示、购物车、订单结算等，由多个团队分别负责不同模块的开发。各个模块之间需要频繁交互数据，且对数据准确性和接口稳定性要求极高。

遇到的问题

1. 接口兼容性：不同团队开发的模块可能对同一功能的接口定义不一致。例如，获取用户信息接口，有的团队返回的数据格式中用户ID是字符串类型，有的团队预期接收的是数字类型，导致数据传递和交互出现错误。
2. 数据类型一致性：在模块间传递复杂数据结构时，容易出现数据类型不一致的情况。比如商品列表数据，在商品展示模块认为价格字段是精确的数字类型，而在购物车模块计算总价时却将价格视为字符串类型，引发计算错误。

解决方案 - 使用TypeScript函数重载

1. 定义重载函数：以获取用户信息为例，定义一个函数getUserInfo。

// 重载定义1：返回数字类型的用户ID
function getUserInfo(): { userId: number, name: string };
// 重载定义2：根据传入参数返回不同格式
function getUserInfo(param: 'extended'): { userId: number, name: string, address: string };
// 函数实现
function getUserInfo(param?: 'extended') {
    if (param === 'extended') {
        return { userId: 1, name: 'John', address: '123 Main St' };
    } else {
        return { userId: 1, name: 'John' };
    }
}

2. 在不同模块使用：各个模块调用getUserInfo函数时，根据自身需求选择合适的调用方式，确保接口兼容性。对于商品价格处理，定义calculateTotalPrice函数。

// 重载定义1：接收数字数组计算总价
function calculateTotalPrice(prices: number[]): number;
// 重载定义2：接收字符串数组先转换再计算总价
function calculateTotalPrice(prices: string[]): number;
// 函数实现
function calculateTotalPrice(prices: (number | string)[]): number {
    if (typeof prices[0] === 'string') {
        return prices.map(price => parseFloat(price)).reduce((acc, cur) => acc + cur, 0);
    } else {
        return prices.reduce((acc, cur) => acc + cur, 0);
    }
}

带来的收益

1. 提高代码可读性：函数重载使代码意图更清晰，不同调用方式对应不同功能，开发人员能快速理解函数用途。
2. 增强可维护性：当需求变化，如获取用户信息需要增加字段时，只需在重载定义和实现中统一修改，无需在各个调用处逐一调整。
3. 确保类型安全：TypeScript编译器在编译阶段就能检查出类型错误，减少运行时因数据类型不一致导致的问题，提高项目稳定性。