TypeScript中的泛型-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1136 天，文章内容可能已经过时。

泛型

泛型是指附属于函数、类、接口、类型别名之上的类型

泛型的使用场景

有时，书写某个函数时，会丢失一些类型信息（多个位置的类型应保持一致或有关联的信息），例如：

function take(arr: any[], n: number): any[] {
  if (n >= arr.length) {
    return arr;
  }
  const newArr: any[] = [];
  for (let i = 0; i < n; i++) {
    newArr.push(arr[i]);
  }
  return newArr;
}

1
2
3
4
5
6
7
8
9
10

可以看到这三个位置使用的都是any，这样就没有办法保证这三个位置类型的一致，且可以看到，即使传入一个数字数组，返回的接口也是any类型

在函数中使用泛型

如何使用泛型：在函数名之后写上 <泛型名称>

泛型相当于是一个类型变量，在定义时，无法预先知道具体的类型，可以用该变量来代替，只有到调用时，才能确定它的类型，例如：

function take<T>(arr: T[], n: number): T[] {
  if (n >= arr.length) {
    return arr;
  }
  const newArr: T[] = [];
  for (let i = 0; i < n; i++) {
    newArr.push(arr[i]);
  }
  return newArr;
}

const result = take<number>([1, 2, 3, 4, 5], 2);
console.log(result);

1
2
3
4
5
6
7
8
9
10
11
12
13

在函数中使用泛型
传入一个数字数组，这时候可以看到返回的结果也是数字数组类型

很多时候，TypeScript会智能的根据传递的参数，推导出泛型的具体类型，例如：

function take<T>(arr: T[], n: number): T[] {
  if (n >= arr.length) {
    return arr;
  }
  const newArr: T[] = [];
  for (let i = 0; i < n; i++) {
    newArr.push(arr[i]);
  }
  return newArr;
}

const result = take([1, 2, 3, 4, 5], 2);
console.log(result);

1
2
3
4
5
6
7
8
9
10
11
12
13

在函数中使用泛型
可以看到现在没有写泛型的类型，但是返回的结果还是数字数组

泛型还可以设置默认值

function take<T = number>(arr: T[], n: number): T[] {
  if (n >= arr.length) {
    return arr;
  }
  const newArr: T[] = [];
  for (let i = 0; i < n; i++) {
    newArr.push(arr[i]);
  }
  return newArr;
}

const result = take([1, 2, 3, 4, 5], 2);
console.log(result);

1
2
3
4
5
6
7
8
9
10
11
12
13

可以给泛型设置一个默认值

如果无法完成推导，并且又没有传递具体的类型，默认为unknown类型（有的是空对象类型），例如：

function take<T>(arr: any[], n: number): T[] {
  if (n >= arr.length) {
    return arr;
  }
  const newArr: T[] = [];
  for (let i = 0; i < n; i++) {
    newArr.push(arr[i]);
  }
  return newArr;
}

const result = take([1, 2, 3, 4, 5], 2);
console.log(result);

1
2
3
4
5
6
7
8
9
10
11
12
13

如何在类型别名、接口、类中使用泛型

直接在名称后写上 <泛型名称>

类型别名中使用泛型：

type callback<T> = (n: T, i: number) => boolean;

function filter<T>(arr: T[], callback: callback<T>): T[] {
  const newArr: T[] = [];
  arr.forEach((item, index) => {
    if (callback(item, index)) {
      newArr.push(item);
    }
  });
  return newArr;
}

const arr = [1, 3, 5, 7, 9, 10];

console.log(filter(arr, (n) => n % 2 !== 0));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

接口中使用泛型：

interface callback<T> {
  (n: T, i: number): boolean;
}

function filter<T>(arr: T[], callback: callback<T>): T[] {
  const newArr: T[] = [];
  arr.forEach((item, index) => {
    if (callback(item, index)) {
      newArr.push(item);
    }
  });
  return newArr;
}

const arr = [1, 3, 5, 7, 9, 10];

console.log(filter(arr, (n) => n % 2 !== 0));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在类中使用泛型：

interface callback<T> {
  (n: T, i: number): boolean;
}

const arr = [1, 3, 5, 7, 9, 10];

class ArrayTools {
  filter<T>(arr: T[], callback: callback<T>): T[] {
    const newArr: T[] = [];
    arr.forEach((item, index) => {
      if (callback(item, index)) {
        newArr.push(item);
      }
    });
    return newArr;
  }
}

const ArrTools = new ArrayTools();

console.log(ArrTools.filter(arr, (n) => n % 2 !== 0));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

泛型约束

泛型约束，用于限制泛型的取值

例如：
函数filterObj需要传入一个带name属性的对象，这时候就要限制传入的obj，需要是一个对象，且要有name属性，这时候就可以使用 extends 来对泛型进行约束

interface obj {
  name: string;
}

function filterObj<T extends obj>(obj: T): T {
  obj.name = "Linnyuu";
  return obj;
}

const o = {
  name: "sjxlife",
};

console.log(filterObj(o));

1
2
3
4
5
6
7
8
9
10
11
12
13
14

多泛型

泛型也可以有多个

例如：
arr1是数字类型的数组，arr2是字符串类型的数组，这时候就不能使用一个泛型

function mixinArr<T, K>(arr1: T[], arr2: K[]): (T | K)[] {
  if (arr1.length !== arr2.length) {
    throw new Error("两个长度不相同");
  }
  const result: (T | K)[] = [];
  for (let i = 0; i < arr1.length; i++) {
    result.push(arr1[i]);
    result.push(arr2[i]);
  }
  return result;
}

const arr1 = [1, 2, 3];
const arr2 = ["a", "b", "c"];

console.log(mixinArr(arr1, arr2)); // [ 1, 'a', 2, 'b', 3, 'c' ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16