TypeScript | 青训营

50 阅读4分钟

TypeScript是一种JavaScript的超集,它可以为JavaScript代码添加静态类型检查和其他特性,从而提高代码的可读性和可维护性。TypeScript中的泛型是一种重要的语言特性,它可以让我们编写更灵活和复用性更高的代码。本文将探讨TypeScript中的泛型的使用方法和场景,以及如何使用类型约束来增加代码的灵活性和安全性。

## 什么是泛型

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而是在使用的时候再指定类型的一种特性。泛型可以帮助我们避免重复的代码和对不同类型的数据进行统一的处理。

举个例子,假设我们要编写一个函数,用来返回一个数组中最小的元素。如果我们只考虑数字类型的数组,那么我们可以这样写:

function getMinNumber(arr: number[]): number {  
  let min = arr[0];  
  for (let i = 1; i < arr.length; i++) {  
    if (arr[i] < min) {  
      min = arr[i];  
    }  
  }  
  return min;  
}  

这个函数可以正常工作,但是如果我们要处理字符串类型的数组呢?我们可能会想到再写一个类似的函数,只是把参数和返回值的类型改成字符串:

function getMinString(arr: string[]): string {  
  let min = arr[0];  
  for (let i = 1; i < arr.length; i++) {  
    if (arr[i] < min) {  
      min = arr[i];  
    }  
  }  
  return min;  
}  

这样做虽然可以解决问题,但是显然有很多重复的代码,而且如果我们要处理其他类型的数组,就需要再写更多的函数。这样不仅增加了代码量,也降低了可维护性。

这时候,泛型就可以帮助我们解决这个问题。我们可以把函数定义成一个泛型函数,用一个类型变量(通常用大写字母表示)来代表任意类型,然后在调用函数的时候再指定具体的类型:

function getMin<T>(arr: T[]): T {  
  let min = arr[0];  
  for (let i = 1; i < arr.length; i++) {  
    if (arr[i] < min) {  
      min = arr[i];  
    }  
  }  
  return min;  
}  

这样,我们就可以用同一个函数来处理不同类型的数组了:

let numbers = [35179];  
let strings = ["apple""banana""orange""pear""grape"];  
  
let minNumber = getMin<number>(numbers); // 指定T为number类型  
let minString = getMin<string>(strings); // 指定T为string类型  
  
console.log(minNumber); // 输出1  
console.log(minString); // 输出apple  

注意,在调用泛型函数时,我们需要在函数名后面加上尖括号,并且在尖括号里面指定具体的类型。这样TypeScript就能知道我们想要使用什么类型来替换泛型参数。

有时候,TypeScript也可以根据我们传入的参数自动推断出泛型参数的类型,这样就不需要显式地指定了:

let numbers = [35179];  
let strings = ["apple""banana""orange""pear""grape"];  
  
let minNumber = getMin(numbers); // TypeScript自动推断出T为number类型  
let minString = getMin(strings); // TypeScript自动推断出T为string类型  
  
console.log(minNumber); // 输出1  
console.log(minString); // 输出apple  

## 泛型的使用场景

泛型不仅可以用在函数上,还可以用在接口和类上。下面我们来看一些常见的泛型的使用场景。

### 泛型接口

泛型接口是指在定义接口时,使用一个或多个类型变量来代表接口中的某些属性或方法的类型。这样,我们可以在实现接口或使用接口的时候,再指定具体的类型。

举个例子,假设我们要定义一个接口,表示一个可以比较大小的对象。我们可以这样写:

interface Comparable<T> {  
  compareTo(other: T): number// 如果this比other大,返回正数;如果相等,返回0;如果小,返回负数  
}  

这里,我们用一个泛型参数T来表示比较的对象的类型。这样,我们就可以用这个接口来定义不同类型的可比较对象了:

class Point implements Comparable<Point> {  
  xnumber;  
  ynumber;  
  
  constructor(x: number, y: number) {  
    this.x = x;  
    this.y = y;  
  }  
  
  // 实现Comparable接口的方法  
  compareTo(otherPoint): number {  
    // 比较两个点的距离  
    let d1 = Math.sqrt(this.x * this.x + this.y * this.y);  
    let d2 = Math.sqrt(other.x * other.x + other.y * other.y);  
    return d1 - d2;  
  }  
}  
  
class Student implements Comparable<Student> {  
  namestring;  
  scorenumber;  
  
  constructor(name: string, score: number) {  
    ![]()this.name = name;  
    this.score = score;  
  }  
  
  // 实现Comparable接口的方法  
  compareTo(otherStudent): number {  
    // 比较两个学生的分数  
    return this.score - other.score;  
  }  
}  

这样,我们就可以用同一个接口来定义不同类型的可比较对象了。我们也可以用泛型函数来处理不同类型的可比较对象:

function getMax<T extends Comparable<T>>(arr: T[]): T {  
  let max = arr[0];  
  for (let i = 1; i < arr.length; i++) {  
    if (arr[i].compareTo(max) > 0) {  
      max = arr[i];  
    }  
  }  
  return max;  
}  

注意,在这个函数中,我们用了一个泛型约束T extends Comparable<T>,表示泛型参数T必须是实现了Comparable接口的类型。这样,我们就可以保证传入的数组中的元素都有compareTo方法。

我们可以用这个函数来获取不同类型的可比较对象中最大的那个:

let points = [new Point(12), new Point(34), new Point(56)];  
let students = [  
  new Student("Alice"90),  
  new Student("Bob"80),  
  new Student("Charlie"95),  
];  
  
let maxPoint = getMax(points); // TypeScript自动推断出T为Point类型  
let maxStudent = getMax(students); // TypeScript自动推断出T为Student类型  
  
console.log(maxPoint); // 输出Point { x: 5, y: 6 }  
console.log(maxStudent); // 输出Student { name: 'Charlie', score: 95 }  

### 泛型类

泛型类是指在定义类时,使用一个或多个类型变量来代表类中的某些属性或方法的类型。这样,我们可以在创建类的实例或继承类的时候,再指定具体的类型。

举个例子,假设我们要定义一个类,表示一个数组列表。我们可以这样写:

class ArrayList<T> {  
  private data: T[]; // 使用泛型参数T来表示数组元素的类型  
  
  constructor() {  
    this.data = [];  
  }  
  
  // 添加元素  
  add(item: T): void {  
    this.data.push(item);  
  }  
  
  // 获取元素  
  get(indexnumber): T {  
    return this.data[index];  
  }  
  
  // 获取长度  
  size(): number {  
    return this.data.length;  
  }  
}  

这里,我们用一个泛型参数T来表示数组列表中元素的类型。这样,我们就可以用这个类来创建不同类型的数组列表了:

let list1 = new ArrayList<number