在 TypeScript 中，函数重载（Function Overloading）允许你定义多个函数签名，以便函数可以接受不同类型的参数或返回不同类型的值。函数重载的主要目的是提供更清晰的类型检查和更好的代码提示。
函数重载的基本语法
函数重载通过定义多个函数签名来实现，这些签名描述了函数可以接受的不同参数类型和返回类型。实际的函数实现需要处理所有可能的参数类型。
示例
以下是一个简单的函数重载示例，展示了如何实现一个 greet 函数，它可以接受一个字符串或一个字符串数组作为参数：
// 函数签名（重载）
function greet(name: string): string;
function greet(names: string[]): string[];
// 函数实现
function greet(nameOrNames: string | string[]): string | string[] {
if (typeof nameOrNames === "string") {
return `Hello, ${nameOrNames}!`;
} else {
return nameOrNames.map(name => `Hello, ${name}!`);
}
}
// 使用重载函数
const greeting1 = greet("Alice"); // 类型为 string
const greeting2 = greet(["Alice", "Bob"]); // 类型为 string[]
在这个例子中，greet 函数有两个重载签名：一个接受 string 类型参数并返回 string，另一个接受 string[] 类型参数并返回 string[]。实际的函数实现需要处理这两种情况。
函数重载的步骤
- 定义重载签名：列出所有可能的函数签名，描述函数可以接受的不同参数类型和返回类型。
- 实现函数：编写一个通用的函数实现，处理所有可能的参数类型。
更复杂的示例
以下是一个更复杂的示例，展示了如何实现一个 createElement 函数，它可以接受不同类型的参数来创建不同的 HTML 元素：
// 函数签名（重载）
function createElement(tag: "div"): HTMLDivElement;
function createElement(tag: "span"): HTMLSpanElement;
function createElement(tag: "img"): HTMLImageElement;
function createElement(tag: string): HTMLElement;
// 函数实现
function createElement(tag: string): HTMLElement {
const element = document.createElement(tag);
return element;
}
// 使用重载函数
const div = createElement("div"); // 类型为 HTMLDivElement
const span = createElement("span"); // 类型为 HTMLSpanElement
const img = createElement("img"); // 类型为 HTMLImageElement
const unknown = createElement("custom"); // 类型为 HTMLElement
在这个例子中，createElement 函数有多个重载签名，分别对应不同的 HTML 元素类型。实际的函数实现使用 document.createElement 方法来创建元素，并根据传入的 tag 参数返回相应的元素类型。
函数重载的注意事项
- 函数实现必须兼容所有重载签名：实际的函数实现需要处理所有可能的参数类型，并且返回类型必须兼容所有重载签名。
- 重载签名不会影响运行时行为：函数重载仅在编译时提供类型检查，不会影响函数的运行时行为。
- 重载签名的顺序很重要：TypeScript 会按照重载签名的顺序进行匹配，因此更具体的签名应该放在前面。
总结
函数重载是 TypeScript 中用于定义多个函数签名的特性，允许函数接受不同类型的参数或返回不同类型的值。通过函数重载，你可以提供更清晰的类型检查和更好的代码提示。理解函数重载的使用场景和语法，可以帮助你编写出更灵活、更类型安全的代码。
