从泛型变量深入理解类型界定，更加纯熟的运用TypeScript泛型变量

2023-10-24 10:58:30

深入探索泛型变量和类型界定

在上一篇博文中，我们了解了 TypeScript 中泛型的基础知识。本篇博文将深入探讨泛型变量的应用以及类型界定的用法，带你掌握泛型编程的精髓。

泛型变量

就像普通变量，泛型变量也能存储值，但它们有一个独特之处：泛型变量可以接受任何类型 的值。举个例子，我们可以定义一个泛型变量 T，它可以接受任何类型的值：

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

在这个函数中，T 是泛型变量，它可以接受任何类型的值。函数 identity() 返回 x 的原值。

类型界定

泛型变量可以通过类型界定来约束其类型，确保泛型变量只能接受特定类型的值。比如，我们可以定义一个泛型变量 T，它只能接受数字类型的值：

function add<T extends number>(x: T, y: T): T {
  return x + y;
}

在这个函数中，T 是泛型变量，但它只能接受数字类型的值。函数 add() 将 x 和 y 相加，并返回结果。

泛型变量的妙用

泛型变量在 TypeScript 中大显身手，可以用来定义函数、类和接口。比如下面这个泛型类 List 可以存储任何类型的值：

class List<T> {
  private data: T[];

  constructor() {
    this.data = [];
  }

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

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

  size(): number {
    return this.data.length;
  }
}

在这个类中，T 是泛型变量，它可以接受任何类型的值。类 List() 可以存储任何类型的值，并提供一些基本操作方法。

泛型变量类型界定的力量

泛型变量可以通过类型界定来约束其类型。通过这种方式，我们可以确保泛型变量只能接受特定类型的值。比如，我们可以定义一个泛型变量 T，它只能接受数字类型的值：

class List<T extends number> {
  private data: T[];

  constructor() {
    this.data = [];
  }

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

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

  size(): number {
    return this.data.length;
  }
}

在这个类中，T 是泛型变量，但它只能接受数字类型的值。类 List() 可以存储数字类型的值，并提供一些基本操作方法。

泛型变量的广泛应用

泛型变量不仅可以定义类，还可以用来定义函数和接口。比如，我们可以定义一个泛型函数 max()，它可以返回两个值中的较大值：

function max<T extends number | string>(x: T, y: T): T {
  if (typeof x === 'number' && typeof y === 'number') {
    return Math.max(x, y);
  } else if (typeof x === 'string' && typeof y === 'string') {
    return x > y ? x : y;
  } else {
    throw new Error('Invalid arguments');
  }
}

在这个函数中，T 是泛型变量，它只能接受数字类型或字符串类型的值。函数 max() 返回两个值中的较大值。

泛型约束

泛型变量可以通过泛型约束来进一步限制其类型。泛型约束可以确保泛型变量只能接受特定类型的值。比如，我们可以定义一个泛型变量 T，它只能接受实现了 Comparable 接口的类型：

interface Comparable<T> {
  compareTo(other: T): number;
}

class List<T extends Comparable<T>> {
  private data: T[];

  constructor() {
    this.data = [];
  }

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

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

  size(): number {
    return this.data.length;
  }

  sort() {
    this.data.sort((a, b) => a.compareTo(b));
  }
}