TypeScript 泛型重载函数的使用方式

下面我详细讲解一下“TypeScript 泛型重载函数的使用方式”的完整攻略。

什么是 TypeScript 泛型重载函数

TypeScript 泛型重载函数指的是在函数中定义多个函数原型，针对不同类型的参数选择不同的函数原型进行调用，以实现对不同类型参数的处理。

泛型重载函数需要满足以下特点：

1. 函数需要有多个原型定义
2. 原型中包含不同的泛型类型，如 <T> 或 <T, U>
3. 每个原型函数需要有不同的参数数量或类型

泛型重载函数的优点在于能够实现更加灵活的类型匹配和处理逻辑，同时能够为开发者提供更好的类型检查和使用提示。

TypeScript 泛型重载函数的使用方式

TypeScript 泛型重载函数的使用方式如下：

1. 首先需要定义多个函数原型
2. 在原型中定义泛型类型，可以使用<T>或<T, U>等形式
3. 根据参数数量或类型选择对应的函数原型进行调用

具体的代码形式如下：

function add<T>(x: T, y: T): T;
function add<T, U>(x: T, y: U): T;
function add(x: any, y: any) {
  if (typeof x === 'string' || typeof y === 'string') {
    return x.toString() + y.toString();
  }
  return x + y;
}

上面的代码定义了一个函数add，这个函数有两个原型。第一个原型中定义了一个泛型类型，表示x和y参数类型相同，返回值类型也相同。第二个原型中定义了两个泛型类型，表示x和y参数类型可以不同，但返回值类型必须和x参数类型相同。最后一个函数原型是具体实现的函数，在其中根据不同的参数类型进行不同的处理。

示例说明

下面我们通过两个示例来进一步说明 TypeScript 泛型重载函数的使用方式。

示例 1：计算两个数的和

function add<T>(x: T, y: T): T;
function add<T, U>(x: T, y: U): T;
function add(x: any, y: any) {
  return x + y;
}

const res1 = add(1, 2); // 3，调用第一个原型
const res2 = add('a', 'b'); // 'ab'，调用了具体的函数实现
const res3 = add(1, 'b'); // 1，调用第二个原型

上面的示例中实现了一个简单的加法函数add。根据不同的参数类型，函数会选择不同的函数原型进行调用，从而实现不同类型的参数处理。

示例 2：获取字符串或数组的长度

function getLength<T extends {length: number}>(arg: T): number;
function getLength<T>(arg: T[]): number;
function getLength(arg: string) {
  return arg.length;
}
function getLength<T>(arg: T): number {
  return arg.length;
}

const arr = [1, 2, 3];
const str = 'hello';
const res4 = getLength(arr); // 3，调用第二个原型
const res5 = getLength(str); // 5，调用具体的函数实现

上面的示例中实现了一个获取字符串或数组长度的函数getLength。在第一个函数原型中，通过使用extends关键字限制了泛型类型，只有实现了length属性的类型才能够匹配这个原型。在第二个函数原型中，参数被限制为数组类型，并直接返回了.length属性。最后一个函数原型是具体的函数实现，当参数类型是字符串时，会直接调用这个具体的实现。

通过多种函数原型的组合，我们可以实现非常灵活和可扩展的函数处理逻辑。