TypeScript泛型函数的用法（附带实例）

泛型与接口类似，不同之处在于，泛型没有属性和方法声明。当定义函数、接口或类时，如果有不确定的类型，就可以使用泛型。

现有一个需求，函数根据指定的数量 count 和数据 value，创建一个包含 count 个 value 的数组。

在学习泛型之前，我们先看下面的代码：

function createArray(value: any, count: number): any[] {
  const arr: any[] = [];
  for (let index = 0; index < count; index++) {
    arr.push(value);
  }
  return arr;
}

const arr1 = createArray(11, 12, 3);
const arr2 = createArray('abcd', 3);
console.log(arr1, arr2);

上面代码的功能没有问题，但由于函数声明的返回值为 any[]，因此从 arr1 或 arr2 中取出的元素是 any 类型的，当我们想对元素进行进一步操作时，就不会再有类型检查的提示了。

比如下面的代码：

// 正确语法没有补全提示
console.log(arr1[0].toFixed(1), arr2[0].split(''));

// 错误语法没有错误提示
console.log(arr1[0].toFixed2(1), arr2[0].split2(''));

如何才能有类型检查的提示呢？此时就可以使用泛型。在使用泛型实现上面的需求之前，先来明确“使用泛型三部曲”，分别是定义泛型、使用泛型和指定具体类型，具体如下：

定义泛型：在定义的函数名右侧定义泛型，比如“fn<T>；
使用泛型：形参、返回值、函数体等位置；
指定具体类型：调用函数时在函数名的右侧指定具体类型，比如“fn<number>()”。

此时再来实现上面的需求，代码如下：

function createArray2 <T> (value: T, count: number): T[] {
  const arr: Array<T> = [];
  for (let index = 0; index < count; index++) {
    arr.push(value);
  }
  return arr;
}

const arr3 = createArray2(11, 12, 3);
const arr4 = createArray2('abcd', 3);
console.log(arr3, arr4);

// 正确语法有补全提示
console.log(arr3[0].toFixed(1), arr4[0].split(''));

// 错误语法有错误提示
console.log(arr4[0].toFixed2(1), arr4[0].split2(''));

在一个函数中可以定义多个泛型参数，示例代码如下：

function swap <K, V> (a: K, b: V): [K, V] {
  return [a, b];
}

const result = swap<string, number>('abc', 123);
console.log(result[0].length, result[1].toFixed());

TypeScript泛型函数的用法（附带实例）

相关文章