TypeScript（ts）学习笔记（六）：泛型

初识泛型

如果我们想写一个函数，它的参数和返回值类型相同，首先我们会想到下面这种写法：

function getNum(num: number): number{
  return num;
}
function getStr(str: string): string{
  return str;
}

或者使用any来定义类型：

function getItem(arg: any): any{
  return arg;
}

但是使用any类型会导致我们无法保证参数类型与返回的类型一定是相同的。所以我们可以采用下面这种方式：

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

我们在函数名称后面声明变量<T>，它用于捕获开发者传入的参数类型，然后我们就可以使用T做参数类型和返回值类型了。

泛型变量

现在假设我们想操作T类型的数组而不直接是T：

function getArr<T>(arg: T[]): T[]{
  return arg;
}
console.log(getArr([1,2])); //[1,2]

这里我们传入的是数字数组，将返回一个数字数组，因为此时T的的类型为number。这时我们把泛型变量T当做类型的一部分使用，而不是整个类型。

泛型接口

interface GenericFn<T>{
  (arg: T): T
}
function identity<T>(arg: T): T {
  return arg;
}
let myIdentity: GenericFn<number> = identity;
// let myIdentity: GenericFn<number> = num=>num;

泛型类

class MyArr<T> {
  arr: T[] = [];
  push(num: T) {
    this.arr.push(num)
  }
}
let a = new MyArr<number>();
a.push(10);

泛型约束

type Params = number | undefined;
class MyArr<T extends Params> {
  arr: T[] = [];
  push(num: T) {
    this.arr.push(num)
  }
}
let a1 = new MyArr<number>();
let a2= new MyArr<string>(); //类型“string”不满足约束“Params”

索引类型

function getValue(obj: object, key: string) {
  return obj[key]
}

image.png

function getValue<T extends object, U extends keyof T>(obj: T, key: U) {
    return obj[key];
}

我们用索引类型keyof T把传入的对象的属性类型取出生成一个联合类型，这里的泛型 U 被约束在这个联合类型中。