一文理解TS泛型

  • 一文理解TS泛型已关闭评论
  • 139 次浏览
  • A+
所属分类:Web前端
摘要

当我们在编写 TypeScript 代码时,经常会遇到需要通用(Generic)的情况,这时候,泛型就是我们的好帮手了。在本篇文章中,我们将深入介绍 TypeScript 泛型的概念以及如何使用。

当我们在编写 TypeScript 代码时,经常会遇到需要通用(Generic)的情况,这时候,泛型就是我们的好帮手了。在本篇文章中,我们将深入介绍 TypeScript 泛型的概念以及如何使用。

什么是泛型?

在编程语言中,泛型指的是参数化类型的概念。也就是说,我们可以定义一个函数、接口或类等,能够处理不同类型的数据,而不是只能处理一种类型的数据。这使得我们的代码更加灵活、通用、可复用。

下面是一个简单的泛型函数的例子:

function identity<T>(arg: T): T {   return arg; }  let output = identity<string>("hello world"); console.log(output); // 输出 hello world 

上面这个函数用于返回的值与传入的参数类型相同,这类函数通常称为 Identity 函数。这里使用了 <T> 来代表泛型类型,在函数声明时,我们用具体类型替换了 <T>,使得函数可以处理任意类型的数据。

泛型类

我们也可以编写在类中使用泛型的代码。下面是一个简单的例子:

class Queue<T> {     private list: T[] = [];      push(item: T) {         this.list.push(item);     }      pop() {         return this.list.shift();     } }  let queue = new Queue<string>(); queue.push("first element"); queue.push("second element"); console.log(queue.pop()); // 输出 first element console.log(queue.pop()); // 输出 second element 

在这个例子中,我们定义了一个 Queue 类,它使用了泛型类型 T,表示队列中元素的类型。我们可以通过调用 push()pop() 方法来添加和移除元素。

泛型类型约束

有时候,我们希望泛型所代表的类型必须满足一定的条件,这个时候我们可以通过添加类型约束来实现。下面是一个简单例子:

interface Lengthwise {     length: number; }  function loggingIdentity<T extends Lengthwise>(arg: T): T {     console.log(arg.length);     return arg; }  loggingIdentity("hello"); // 输出 5 

在上面的例子中,我们定义了一个泛型函数 loggingIdentity,它接受一个参数 arg,该参数的类型必须是一个具有 length 属性的对象。我们通过 extends 关键字来实现类型约束。

在泛型中使用类型别名

在 TypeScript 中,我们还可以使用类型别名来定义泛型类型。下面是一个简单的例子:

type Coordinate = [number, number];  function distance(a: Coordinate, b: Coordinate): number {     const [x1, y1] = a;     const [x2, y2] = b;     return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); }  console.log(distance([0, 0], [3, 4])); // 输出 5 

在上面的例子中,我们定义了一个类型别名 Coordinate,它是一个元组类型,包含两个数字。然后我们定义了一个 distance 函数,它接受两个 Coordinate 类型的参数,并计算两点之间的距离。

总结

在本篇文章中,我们深入介绍了 TypeScript 中泛型的概念,以及提供了一些实际应用的例子。泛型是一个非常强大且常用的特性,它可以使我们的代码更加通用、灵活以及可复用。希望通过本篇文章的介绍,你能够更加深入地理解 TypeScript 中的泛型。