ts函数重载

### TypeScript 函数重载概述 TypeScript 的函数重载允许开发人员为同一函数定义多个类型签名，从而支持根据不同参数类型或数量执行不同的逻辑。这种特性增强了代码的灵活性和可读性，同时也提高了类型安全性。 --- #### 1. **两种常见的实现方法** ##### 方法一：函数声明和函数实现分离 在这种模式下，先定义一组重载签名，随后提供一个通用的实现版本。该实现必须能够适配所有的重载签名[^1]。 以下是具体示例： ```typescript // 定义两个重载签名 function add(a: number, b: number): number; function add(a: string, b: string): string; // 提供实际实现 function add(a: any, b: any): any { return a + b; // 这里会根据传入的类型自动决定加法的行为 } console.log(add(1, 2)); // 输出: 3 (number) console.log(add("a", "b")); // 输出: ab (string) ``` 上述例子展示了如何通过重载让 `add` 函数既能处理数值相加也能处理字符串拼接[^4]。 --- ##### 方法二：使用函数表达式与类型注解 另一种方式是利用函数表达式配合接口或联合类型来模拟重载效果。这种方式更加简洁，但在某些复杂场景下可能不如显式的重载签名灵活[^5]。 下面是一个简单的实例： ```typescript type AddFunction = ((a: number, b: number) => number) | ((a: string, b: string) => string); const add: AddFunction = function (a: any, b: any): any { return a + b; }; console.log((add as (a: number, b: number) => number)(1, 2)); // 输出: 3 console.log((add as (a: string, b: string) => string)("hello ", "world")); // 输出: hello world ``` 此方法虽然有效，但对于复杂的多签名字典结构来说不够直观[^3]。 --- #### 2. **完整的重载示例分析** 考虑如下需求：创建一个名为 `createElement` 的函数，它可以接收不同类型的配置对象并返回对应的 HTML 元素。 ```typescript interface DivConfig { tag: 'div'; text?: string } interface SpanConfig { tag: 'span'; content?: string } // 定义重载签名 function createElement(config: DivConfig): HTMLDivElement; function createElement(config: SpanConfig): HTMLSpanElement; // 实际实现 function createElement(config: { tag: string } & Partial<DivConfig> & Partial<SpanConfig>): HTMLElement { const element = document.createElement(config.tag); if ('text' in config && typeof config.text === 'string') { element.textContent = config.text; } else if ('content' in config && typeof config.content === 'string') { element.innerHTML = config.content; } return element; } // 测试用例 const divEl = createElement({ tag: 'div', text: 'This is a DIV!' }); const spanEl = createElement({ tag: 'span', content: '<strong>This is SPAN!</strong>' }); document.body.appendChild(divEl); // 添加到 DOM 中显示文字 document.body.appendChild(spanEl); // 显示带标签的内容 ``` 在这个案例中，我们清楚地看到如何通过重载使单个函数适应多种输入形式的同时维持严格的类型约束[^2]。 --- #### 3. **注意事项** - 所有重载签名应覆盖所有潜在调用情况。 - 实现部分需兼容全部重载签名的要求。 - 类型检查发生在编译期；运行时仅依赖最终实现逻辑。 --- ### 结论 TypeScript 的函数重载是一种强大工具，在构建具有高度动态性和严格类型控制的应用程序时尤为有用。掌握其基本概念以及正确运用技巧对于提升编码效率至关重要。 ---