TypeScript泛型：使代码更具有通用性

引言

随着 Web 开发的快速发展，我们越来越需要编写具有高度通用性的代码，代码的可重用性已成为关键。

我们往往需要处理各种各样类型的数据。有时候数据的类型并不确定，或者我们想要编写更加灵活的代码来处理不同类型的数据。在这种情况下，TypeScript 泛型成为了我们必须掌握的利器。TypeScript 泛型就是在解决这个问题上非常重要的一种技术。

本文将从代码角度探讨 TypeScript 泛型的作用和优势，并给出一些实际例子。

什么是泛型？

• 泛型是许多编程语言中的一个重要特性，它可以将类型参数化，让函数、类和接口的输入和输出参数变得更加通用，从而增加代码的灵活性。在 TypeScript 中，泛型可以帮助我们在编写代码时指定不确定的类型。这样，在编译时，编译器就能够进行类型检查，确保代码的类型安全性。
• 泛型的定义：泛型是指在定义函数、类或接口时使用类型变量 T 来代替具体的类型， T 可以表示任意类型。这种方式不仅能够使代码更加通用，还能够保证类型安全。

泛型的优点

使用泛型的主要优点是代码的可重用性和减少代码重复。通过使用泛型，我们可以编写具有更大通用性的代码，这样可以减少代码重复，提高代码的可维护性和可读性。泛型还可以减少类型转换的需要，提高代码的性能。

泛型的使用

简单示例：

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

• 在上面的代码中，我们定义了一个函数 identity ，它接受一个参数 arg 和一个类型参数 T 。在函数的返回类型中，我们使用了类型参数 T ，表示函数返回的类型与参数的类型相同。在调用函数时，我们需要使用尖括号 <> 来指定 T 的实际类型，内部包含一个类型参数。
• 在上面的例子中， identity<T> 中的 T 是一个类型参数，它可以代表任何类型。我们也可以省略 <string> 这个泛型参数的具体类型，让编译器自动推断出类型，如下所示：

  let output = identity("hello");
  console.log(output); // 输出 "hello"
  

TypeScript 中的泛型还可以应用于类、接口和函数类型的定义中。下面是一些例子：

泛型类：

• 在类中使用泛型可以使 类的属性 和 方法 变得更加通用。下面是一个例子：

  class Box {
        
        
      private value: T;
      constructor(value: T) {
        
        
          this.value = value;
      }
      getValue(): T {
        
        
          return this.value;
      }
  }
  let box = new Box("hello world");
  console.log(box.getValue()); // output: "hello world"
  

• 在上面的代码中，我们定义了一个泛型类 Box ，其中 value 的类型参数是 T 。
• 再来看一个例子：

  class Stack<T> {
        
        
      private items: T[] = [];
      push(item: T) {
        
        
      	this.items.push(item);
      }
      pop(): T | undefined {
        
        
      	return this.items.pop();
      }
  }
  let stack = new Stack<number>();
  stack.push(1);
  stack.push(2);
  console.log(stack.pop()); // 输出 2 console.log(stack.pop()); // 输出 1
  

• 在上面的例子中，声明了一个 Stack<T> 类，它的属性和方法中都使用了泛型。 let stack = new Stack<number>() 创建了一个只能操作 number 类型的栈，通过调用 push() 和 pop() 方法来操作栈中的元素。

泛型接口：

• 在接口中使用泛型可以使接口更具有通用性。下面是一个例子：

  interface Comparator {
        
        
      compare(a: T, b: T): number;
  }
  function sort(array: T[], comparator: Comparator): T[] {
        
        
      // sort array using comparator
      return array;
  }
  

• 在上面的例子中，我们定义了一个泛型接口 Comparator ，它接受类型参数 T ，并定义了一个比较函数 compare 。

• 再来看一个例子：

  interface Pair<T, U> {
        
        
      first: T;
      second: U;
  }
  let p: Pair<number, string> = {
        
        
      first: 1,
      second: "hello"
  };
  console.log(p); // 输出 {first: 1, second: "hello"}
  

• 在上面的例子中，声明了一个 Pair<T, U> 接口，它表示由两个不同类型的值组成的一对。 let p: Pair<number, string> 创建了一个只能存储一个 number 类型和一个 string 类型的一对。

泛型函数类型

• 在函数中使用泛型可以使函数的参数类型和返回类型变为通用的，从而可以在不同的场景中使用。下面是一个例子：

  type MapFunction = (value: T, index: number, array: T[]) => U; 
      function map(array: T[], fn: MapFunction): U[] {
        
        
    	  let result: U[] = [];
    	  for (let i = 0; i < array.length; i++) {
        
        
    	  	result.push(fn(array[i], i, array));
    	  }
      return result;
  }
  

• 在上面的例子中，我们定义了一个泛型函数 map ，它接受类型参数 T 和 U ，并调用 MapFunction 类型的函数 fn 对 T 类型的数组进行映射。在所有这些情况下，类型参数 T 和 U 都可以是任何 TypeScript 中的类型。

泛型约束：

• TypeScript 中的泛型还支持约束，它可以帮助我们在编写泛型代码时提供更多的类型信息，从而提高代码的类型安全性。下面是一个例子：

  interface Lengthwise {
        
        
      length: number;
  }
  function identity(arg: T): T {
        
        
      console.log(arg.length);
      return arg;
  }
  let output = identity("hello world");
  console.log(output); // output: "hello world"
  

• 在上面的代码中，我们定义了一个接口 Lengthwise ，它定义了一个 length 属性。然后，我们定义了一个泛型函数 identity ，它接受类型参数 T ，并在 T 上应用了 Lengthwise 接口的约束。这表明在调用 identity 时，传递的参数必须具有 length 属性。这样，我们就可以在函数中使用 arg.length ，确保代码的类型安全性。
• 再来看一个例子：

  interface Lengthwise {
        
        
      length: number;
  }
  function loggingIdentity<T extends Lengthwise>(arg: T): T {
        
        
      console.log(arg.length);
      return arg;
  }
  loggingIdentity([1, 2, 3]); // 输出 3
  loggingIdentity("hello"); // 输出 5
  loggingIdentity(123); // 编译错误：类型“123”的参数不能赋给类型“Lengthwise”的参数
  

• 在上面的例子中， loggingIdentity<T extends Lengthwise> 表示泛型参数T需要满足 Lengthwise 接口中的要求（即必须有一个 length 属性）。在调用 loggingIdentity() 函数时，可以传递一个带有 length 属性的对象，而不能传递一个不符合要求的对象。

结论

在本文中，我们深入研究了 TypeScript 中的泛型，探讨了它们的优点、用法和约束。通过使用泛型，我们可以编写具有更大通用性的代码，提高代码的可重用性、可维护性和可读性。我们还可以使用约束来提高代码的类型安全性。在实际应用中，需要根据情况合理地使用泛型，尽可能地使用泛型，以达到更好的代码复用和维护效果。