零基础入门Typescript—泛型

泛型-Generics

先来看第一个泛型的例子：identity函数，这个函数会返回任何传入它的值。你可以把这个函数当成是echo命令
不用泛型，函数可能是下面这样：

function identity(arg: number): number {
    return arg;
}

或者用any类型来定义函数:

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

使用any类型会导致这个函数可以接收任何类型的arg参数，然后传入的类型与返回的类型应该是相同的，如果我们传入一个数字，我们只知道任何类型的值都有可能被返回

所以我们需要一种方法使返回值的类型与传入参数的类型是相同的，这里我们使用了类型变量：

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

T帮助我们捕获用户传入的类型，之后我们可以使用这个类型，并使用T当做返回值类型，那么我们就知道参数类型和返回值类型是相同的了。

使用泛型变量

如果我们想获取T类型的length，那么上面的写法会出错，因为输入的可能是一个数字类型没有length。那么就需要以下写法，像定义数组一样去定义：

function loggingIdentity<T>(arg: T[]): T[] {
    console.log(arg.length);
    return arg;
}

也可以这样去实现：

function loggingIdentity<T>(arg: Array<T>): Array<T> {
    console.log(arg.length);
    return arg;
}

约束泛型

先来看下面一个例子：
泛型T不一定包含属性length，我们可以给他传入任意类型，当然有些不包括length属性，所以就会报错

function echoWithArr<T>(arg: T): T {
  console.log(arg.length)
  return arg
}

这个时候我们就可以使用下面这种写法，利用前面讲过的 interface ，约束里面必须包含length属性，这样传入就没有任何问题，只能传入包含length属性的类型

interface IWithLength {
  length: number;
}
function echoWithLength<T extends IWithLength>(arg: T): T {
  console.log(arg.length)
  return arg
}

echoWithLength('str')
const result3 = echoWithLength({length: 10})
const result4 = echoWithLength([1, 2, 3])