TypeScript 泛型及应用

TypeScript 泛型及应用

泛型（Generics）是 TypeScript 中的一项强大特性，它允许我们在定义函数、类和接口时使用类型参数，从而增加代码的灵活性和重用性。本文将介绍 TypeScript 中泛型的概念、语法以及一些常见的应用场景。

泛型函数

在 TypeScript 中，我们可以使用泛型来定义函数。通过在函数名后面使用尖括号 来指定类型参数，并在函数参数或返回值中使用这个类型参数。例如：

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

let result = identity<string>("Hello");
1
2
3
4
5

在上面的例子中，我们定义了一个泛型函数 identity，它接受一个参数 arg，并返回相同类型的值。通过使用 ，我们可以在函数调用时指定参数的类型，从而实现类型安全的操作。

泛型类

除了函数，我们还可以使用泛型来定义类。通过在类名后面使用尖括号 来指定类型参数，并在类的属性、方法或构造函数中使用这个类型参数。例如：

class Box<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

let box = new Box<number>(42);
console.log(box.getValue()); // 输出: 42
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在上面的例子中，我们定义了一个泛型类 Box，它有一个私有属性 value 和一个公共方法 getValue。通过使用 ，我们可以在创建类的实例时指定属性的类型，并在方法的返回值中使用这个类型参数。

泛型接口

TypeScript 还支持泛型接口的定义。通过在接口名后面使用尖括号 来指定类型参数，并在接口的属性或方法中使用这个类型参数。例如：

interface List<T> {
  add(item: T): void;
  get(index: number): T;
}

class MyList<T> implements List<T> {
  private items: T[] = [];

  add(item: T): void {
    this.items.push(item);
  }

  get(index: number): T {
    return this.items[index];
  }
}

let myList = new MyList<number>();
myList.add(1);
myList.add(2);
console.log(myList.get(0)); // 输出: 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在上面的例子中，我们定义了一个泛型接口 List，它有两个方法 add 和 get，分别用于添加元素和获取元素。通过使用 ，我们可以在实现接口时指定方法参数和返回值的类型。

泛型的应用场景

泛型在 TypeScript 中有许多应用场景，以下是一些常见的应用：

• 容器类：通过使用泛型，我们可以创建通用的容器类，如数组、链表、栈等，可以存储不同类型的数据。
• 函数工具：泛型可以用于编写通用的函数工具，如排序算法、过滤器、映射器等，可以处理不同类型的数据。
• Promise 和异步操作：通过使用泛型，我们可以创建通用的 Promise 类型，可以处理不同类型的异步操作。
• React 组件：在 React 中，我们可以使用泛型来定义通用的组件，可以接受不同类型的属性和状态。

总结

泛型是 TypeScript 中的一项强大特性，它允许我们在定义函数、类和接口时使用类型参数，从而增加代码的灵活性和重用性。通过泛型，我们可以创建通用的函数、类和接口，可以处理不同类型的数据，适用于各种应用场景。

希望本文对你理解 TypeScript 中泛型的概念和应用有所帮助！