TypeScript中的泛型(第一部分:泛型)

261 阅读2分钟

这是我参与11月更文挑战的第21天,活动详情查看:2021最后一次更文挑战

在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

定义

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。

简单的例子

我们来看示例来了解泛型:

首先我们看一个函数

function echo(arg){
    return arg
}
const result = echo(123)

在这里我们的变量result 会是any类型如图:

那么我们知道any类型的范围很大我们应该尽量减少any类型的使用,这个时候如果我们使用泛型会很好的解决这个问题。

我们将函数改写成泛型的写法:

function echo<T>(arg:T):T{
    return arg
}
const result = echo(123)

在上例中我们在函数名后添加了 <T>,其中 T 用来指代任意输入的类型,而且我们并没有给result变量指定类型但是我们的result变量会根据类型推断来自动指定类型,在上面的代码中result变量的类型会自动指定为数字类型。

当然我们也可以手动给它具体的类型比如给它string类型:

function echo<T>(arg:T):T{
    return arg
}
const result:string = echo('123')

多个类型参数

当我们定义泛型的时候,也可以一次定义多个类型参数。让我们看来看一个场景:

我们有一个元组,其中有两个值他们的类型都是随意的这个时候我们要返回新的元组并调换他们的位置

代码:

function swap<T,U>(tuple:[T,U]):[U,T]{
    return [tuple[1], tuple[0]]
}
const result = swap(['str',123])
console.log(result[0]);
console.log(result[1]);

打印结果:

其中的数据类型:

当然我们也可以将第一个作为number使用比如:

function swap<T,U>(tuple:[T,U]):[U,T]{
    return [tuple[1], tuple[0]]
}
const result = swap(['str',123])
result[0].toExponential()

把第二个值当作string使用:

function swap<T,U>(tuple:[T,U]):[U,T]{
    return [tuple[1], tuple[0]]
}
const result = swap(['str',123])
result[1].length

这样它都不会报错。