在 TypeScript 中，函数重载是一种非常有用的技术，它可以让我们在不同的情况下使用同一个函数名，根据不同的参数类型和数量，自动选择合适的函数实现。本文将详细介绍 TypeScript 中函数重载的实现方法，包括函数签名、函数实现以及示例代码。
函数签名
在 TypeScript 中，函数重载的实现需要先定义函数签名，它描述了函数的参数和返回值的类型。函数签名有两种类型：一种是普通函数签名，用于描述函数的具体实现；另一种是重载函数签名，用于描述函数的不同参数类型和数量对应的实现。下面是一个例子：
// javascriptcn.com 代码示例
function foo(x: string): string;
function foo(x: number): number;
function foo(x: any): any {
if (typeof x === 'string') {
return x.toUpperCase();
} else if (typeof x === 'number') {
return x * x;
}
}这个例子中，我们定义了一个名为 foo 的函数，它有两个重载函数签名：一个接受一个字符串参数并返回一个字符串，另一个接受一个数字参数并返回一个数字。这两个重载函数签名分别对应了不同的函数实现，它们通过判断参数类型来选择正确的实现。
函数实现
在 TypeScript 中，函数实现是指函数的具体实现代码。函数实现需要根据函数签名来选择正确的重载函数实现。下面是一个例子：
function bar(x: string | number): string | number {
if (typeof x === 'string') {
return x.toUpperCase();
} else if (typeof x === 'number') {
return x * x;
}
}这个例子中，我们定义了一个名为 bar 的函数，它接受一个字符串或数字参数，并返回一个字符串或数字。这个函数实现中，我们使用了联合类型 string | number 来描述参数类型，根据参数类型的不同，选择正确的实现。
示例代码
下面是一个完整的 TypeScript 代码示例，展示了如何使用函数重载来实现一个字符串或数字相加的函数：
// javascriptcn.com 代码示例
function add(x: string, y: string): string;
function add(x: number, y: number): number;
function add(x: any, y: any): any {
if (typeof x === 'string' && typeof y === 'string') {
return x + y;
} else if (typeof x === 'number' && typeof y === 'number') {
return x + y;
}
}
console.log(add('hello', 'world')); // 输出 'helloworld'
console.log(add(1, 2)); // 输出 3在这个示例中，我们定义了一个名为 add 的函数，它有两个重载函数签名：一个接受两个字符串参数并返回一个字符串，另一个接受两个数字参数并返回一个数字。这两个重载函数签名分别对应了不同的函数实现，它们通过判断参数类型来选择正确的实现。最后，我们使用 console.log 函数输出了两个函数调用的结果。
总结
函数重载是 TypeScript 中非常有用的技术，它可以让我们在不同的情况下使用同一个函数名，根据不同的参数类型和数量，自动选择合适的函数实现。在实现函数重载时，我们需要定义函数签名和函数实现，根据参数类型的不同选择正确的实现。通过本文的介绍和示例，相信读者已经掌握了 TypeScript 中函数重载的实现方法，可以在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657a6101d2f5e1655d4ac354