什么是 TypeScript 泛型编程

前端的程序员可能对泛型不是很了解，了解Java这种强类型语言可能会知道泛型，使用泛型可以编写动态可重用的TS代码，在TS中泛型一般用于类、接口和函数。

今天我们就来学习在TypeScript中如何去使用泛型，以及一般会用到泛型的场景。

1. 快速理解泛型

可能很多熟悉JS开发的前端搞不懂泛型是啥，下面我们通过一个最简单的例子来明白泛型。

这两个功能相同但只是入参和返回的类型不同，如果在TS中不使用泛型的话，就要定义两个函数，只是它的类型不同。

// 数字类型
function fun(args: number): number {
  return args;
}

// 字符串类型
function fun(args: string): string {
  return args;
}

当然你可以说用any类型啊

function fun(args: any): any {
  return args;
}

但使用any其实是逃避类型检查，和使用JS一样，那还用TS干嘛。

下面我们使用泛型来实现

2. 使用泛型

要创建一个泛型，需要使用Type参数，类型参数一般用T或<T>定义，表示类、接口或者函数的数据类型。

下面我们用泛型改写上面的函数

function fun<T>(args:T):T {
  return args;
}

使用泛型函数也很简单

let result = fun<string>("Hello World");

或者这样

let result2 = fun<number>(200);

我们可以去跑一下代码验证一下，可以去官方的playground

地址：https://www.typescriptlang.org/play

以上是泛型在TS中最简单用法，平时也挺常用的。

下面来看看稍微复杂点的泛型用法

3. 多种类型的泛型

上面我们使用T来表示一个类型，那么如果一个函数有很多参数，我们可以用不同的字母来表示类型。比如下面这样

function fun<T, U, V>(args1:T, args2: U, args3: V): V {
  return args3;
}

上面的函数接收args1、args2、args3共3个参数，并返回args3。这些参数不限定类型，因为T, U, V被用作函数参数的泛型类型。

下面调用这个函数

let result3 = fun<string, number, boolean>('小帅', 23, false);

然后我们运行一个试试

函数返回第三个参数，所以是false

泛型不光可以用于函数，也可以用于类和接口，下面我们来继续看

4. 创建泛型类

和函数差不多，类的泛型也使用<>中的类型参数，然后在整个类中使用<T>类型来定义方法和属性。

我们来创建一个自定义数组的类，定义一个arr数组属性，数组的类型为一个泛型

class customArray<T> {
  private arr: T[] = [];
}

创建一个获取该数组的方法

getItems (): T[] {
  return this.arr;
}

再来创建一个addItem方法，用来向数组中push元素

addItem(item: T) {
  this.arr.push(item);
}

arr数组的类型为T[]，所以我们的数组可以为任意类型，可以是数字、字符串、布尔等任意类型。

接着在添加一个removeItem方法，用于删除数组的指定元素

removeItem(item: T) {
  let index = this.arr.indexOf(item);
  if(index > -1) {
    this.arr.splice(index, 1);
  }
}

现在类的属性和方法写的差不多了，我们来测试一下结果如何

let numObj = new customArray<number>();
numObj.addItem(10);

let strObj = new customArray<string>();
strObj.addItem('小帅');

console.log(numObj);
console.log(strObj);

console.log(numObj.getItems());
console.log(strObj.getItems());

我们创建了一个数字类型的numObj对象，一个字符串类型的strObj对象

下面我们来了解关于泛型的一些约束力

5. 泛型的约束

上面我们学会了怎么给函数和类去使用泛型作为类型，但使用泛型也有一些缺点，比如下面的例子

function getLength<T>(args: T) : number {
  return args.length;
}

在上面的函数中，如果我们传入的参数有length属性会正常工作，如果没有就会报错

可以看到错误为泛型T并没有length属性，那我们怎么办呢

我们可以用一个通用的约束，创建一个名为 funcArgs 的接口并定义length属性

interface funcArgs {
  length: number;
}

现在我们来修改一下

function getLength<T extends funcArgs>(args:T) : number {
  return args.length;
}

下面我们来跑一下

可以看到，使用没有length参数的类型，TS就会抛出异常。

如果参数具有length属性，就不会有任何错误消息。

总结

今天我们学习了如何在TypeScript中使用泛型，包括在函数、类、接口应用泛型等。

如果本文有帮助，微信搜索【小帅的编程笔记】，每天一个小知识