重载陷阱
实现签名必须兼容所有重载签名。用户只能通过重载签名调用函数，实现签名对外不可见。
4.4 函数重载
为同一函数提供多种类型签名
🎯 学习目标
- 理解函数重载的概念和作用
- 掌握重载签名的编写方法
- 学会实现重载函数
- 了解重载的最佳实践
📚 重载基础
函数重载允许为同一个函数提供多个类型签名，根据输入参数的不同返回不同类型的结果。
// 重载签名
function reverse(str: string): string;
function reverse<T>(arr: T[]): T[];
// 实现（必须兼容所有重载）
function reverse<T>(input: string | T[]): string | T[] {
if (typeof input === 'string') {
return input.split('').reverse().join('');
}
return input.slice().reverse();
}
// 使用
const reversedStr = reverse('hello'); // "olleh" (string)
const reversedArr = reverse([1, 2, 3]); // [3, 2, 1] (number[])
💻 实际示例
// DOM 元素查询
function query(selector: string): Element | null;
function query(selector: string, all: true): NodeListOf<Element>;
function query(selector: string, all?: boolean): Element | NodeListOf<Element> | null {
if (all) {
return document.querySelectorAll(selector);
}
return document.querySelector(selector);
}
// 事件处理
function on(element: HTMLElement, event: string, handler: EventListener): void;
function on(element: HTMLElement, events: string[], handler: EventListener): void;
function on(element: HTMLElement, eventOrEvents: string | string[], handler: EventListener): void {
if (Array.isArray(eventOrEvents)) {
eventOrEvents.forEach(event => element.addEventListener(event, handler));
} else {
element.addEventListener(eventOrEvents, handler);
}
}
⚠️ 注意事项
// 重载签名顺序很重要：从具体到宽泛
function process(x: string): string;
function process(x: number): number;
function process(x: string | number): string | number {
if (typeof x === 'string') {
return x.toUpperCase();
}
return x * 2;
}
// 实现签名对外不可见
// function process(x: string | number): string | number { ... }
// 用户只能使用重载签名调用
⚠️
📝 本节小结
✅
- • 重载提供多个类型签名
- • 实现必须兼容所有签名
- • 签名顺序：从具体到宽泛
- • 避免过度使用，考虑联合类型替代