今天我们来介绍一下typescript中的难点--泛型。
首先简单看一下下面的图片。
typescript 泛型generics

Adding simple type annotations给变量增加一些简单的类型前面可以看到滑梯平滑度过,但是看到generics,滑梯的坡度就会变成理论上无法使用的滑梯了。

这也说明我们的泛型generics,是非常难的,不过也说明,我们只要掌握了泛型generics也就掌握了typescript中最难的一点。

简单来讲一下泛型。
假设我们有一个函数,然后这个函数只做一件事,就是我们传入一个参数,然后函数返回这个参数。
typescript 泛型generics
我们可以看到出现了一个问题,我们传入的参数是数字类型,但是返回的值却是
any
类型的。这并不是我们想要的结果,因为这会使结果丧失了它的类型。

然后简单修改一下,设置一下类型。typescript 泛型generics

但是这么写是非常麻烦的,因为我们如果想要传一个别的类型的参数,需要进行修改。

既然如此麻烦,那么我们将类型设置为any类型呢?typescript 泛型generics
但是假如说我们修改成any类型的话,问题就回到起点了。typescript 泛型generics
并且这其实还会出现一个bug,我可以直接修改result的类型typescript 泛型generics
下面来写一下泛型吧。泛型其实就是再函数的名字后面加<>然后将这个泛型的名字加在<>
内,当然,其实这个名字是无所谓的,就跟我们的变量名,函数名一样,是随便起的。这个名字其实就是一个占位符,一个神秘的占位符。然后接下来呢,我们的参数和返回值定义的类型就是我们的名字了,也就是我们的占位符。typescript 泛型generics

我们要先创建一个str类型的变量,然后将它传入函数,假如说我们还是传
123的话,结果是什么样的呢?

请各位自己试一下吧,哈哈。
typescript 泛型generics
假如说我们还是要设置result的类型,能成功么?typescript 泛型generics
答案是不行的。true并非string类型。

接下来我们对泛型进行其他的操作,比如说数组。其实这个也就是简单的一一对应,我们前面设置的后面就要跟上t,将他们进行对应。
typescript 泛型generics
然后我们就可以对相应的项进行相应类型的操作了。泛型就像是一个占位符,一个变量,在使用的时候我们可以将定义好的类型像参数一样传入,之后他会原封不动的输出。
假如说我们要使用.length的话,在函数内部使用是会报错的,因为我们没有定义参数的类型。
typescript 泛型generics就算我们使用前面所说的泛型也是没用的,因为这里我们要引入一个新的概念,叫做泛型的约束,顾名思义,就是将泛型的类型进行约束。因为我们的泛型是可以传入任意类型的,而我们如果想要在函数内使用特定的属性方法的话,就要将类型给他约束一下。

我们先简单看一下泛型怎么设置传入数据的类型。
我们将T设置为数组,其实也就是将T后面加上[],这样就是数组了。
typescript 泛型generics

但是虽然这么看已经有了好转,但实际上这个方法并没有什么卵用。
属性,但是我们这样设置的话,只能传入数组。

通过泛型的约束,我们将类型约束为能使用length属性的类型就可以了。typescript 泛型generics

这里我们先上代码给大家看一下吧,首先是定义了一个接口,然后通过extends来让T继承IWithLength,这样我们就可以传入可以使用length的类型了。
这其实就是duck了,只要你有这个length属性,你就符合我们的约束,那么你就是duck了,不管你实际上是什么类型。
我们如果传入一个不符合的类型,当然是会报错的。
关于泛型的介绍,第一部分就到这里了,其余的等下一篇文章进行介绍。如果有什么疑问可以在评论区留言我会在看到的第一时间进行回复的。

本文作者:博主:     文章标题:typescript 泛型generics
本文地址:https://zjzdmc.top/jsfx/130.html     
版权说明:若无注明,本文皆为“Datehoer的Blog-个人博客-技术分享”原创,转载请保留文章出处。
最后修改:2021 年 04 月 19 日 02 : 58 PM
如果觉得我的文章对你有用,请随意赞赏