TypeScript中的泛型：从基础到高级应用

在这里插入图片描述

TypeScript泛型入门

1. 泛型的概念与优势

泛型是TypeScript中一种强大的类型系统特性，它允许我们创建可重用的组件，这些组件可以处理任何类型的数据，而不仅仅是特定的类型。通过使用泛型，我们可以编写更加灵活和可扩展的代码，同时保持类型安全。泛型的主要优势包括：

类型灵活性：泛型使函数、类和接口能够处理不同类型的输入，而无需为每种类型编写单独的实现。
代码重用性：使用泛型可以减少代码重复，因为一个泛型函数或类可以适用于多种类型。
类型安全性：泛型确保在运行时处理的数据类型与编译时指定的类型相匹配，从而避免了类型错误。

2. 泛型的基本语法

在TypeScript中，泛型使用尖括号<>来定义。当我们定义一个泛型函数或类时，我们可以在这些尖括号中指定一个或多个类型参数。这些类型参数在使用泛型时可以被具体类型替换。

2.1 示例：泛型函数

// 定义一个泛型函数，用于交换两个值的位置
function swap<T>(a: T, b: T): [T, T] {
   
    return [b, a];
}

// 使用泛型函数
let result = swap<string>("hello", "world"); // 指定类型为string
console.log(result); // 输出: ["world", "hello"]

在这个例子中，T是一个类型参数，它代表任何类型。当我们调用swap函数时，我们指定了T的具体类型为string。这样，TypeScript就能确保我们传递的参数和返回的值都是字符串类型。

3. 泛型在函数中的使用

泛型在函数中的使用非常广泛，它们可以用于创建灵活的函数，这些函数可以处理不同类型的输入和输出。

3.1 示例：泛型函数的类型推断

function identity<T>(arg: T): T {
   
    return arg;
}

let output = identity(5); // 类型推断为number
console.log(output); // 输出: 5

let output2 = identity("hello"); // 类型推断为string
console.log(output2); // 输出: "hello"

在这个例子中，我们定义了一个泛型函数identity，它接受一个参数并返回相同的值。当我们调用这个函数时，TypeScript能够自动推断出参数的类型，因此我们不需要显式地指定类型参数。

3.2 示例：泛型函数的约束

有时，我们可能希望泛型函数只接受特定类型的参数。这可以通过在类型参数后面添加约束来实现。

function firstElement<T>(arr: T[]): T {
   
    return arr[0];
}

let numbers = [1, 2, 3];
let firstNumber = firstElement(numbers); // 类型推断为number
console.log(firstNumber); // 输出: 1

let strings = ["hello", "world"];
let firstString = firstElement(strings); // 类型推断为string
console.log(firstString); // 输出: "hello"

在这个例子中，我们定义了一个泛型函数firstElement，它接受一个数组并返回数组的第一个元素。我们使用了类型参数T来表示数组中的元素类型。由于数组的类型是T[]，TypeScript能够正确地推断出数组元素的类型。

3.3 示例：泛型函数的默认类型

我们还可以为类型参数提供默认类型，这样在调用泛型函数时，如果没有指定类型参数，TypeScript将使用默认类型。

function map<T, U>(arr: T[], f: (item: T) => U): U[] {
   
    return arr.map(f);
}

let numbers = [1, 2, 3];
let doubled = map(numbers, (x) => x * 2); // 类型推断为number[]