Datehoer的博客
我本将心向明月,奈何明月照沟渠
Datehoer的博客

当前位置:主页 > 技术分享 > typescript 泛型generics

typescript 泛型generics

浏览: 作者:Datehoer 发布日期:2021-01-21 21:19:29 来源: 未知
今天我们来介绍一下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后面就要跟上t,将他们进行对应。


typescript 泛型generics

然后我们就可以对相应的项进行相应类型的操作了。泛型就像是一个占位符,一个变量,在使用的时候我们可以将定义好的类型像参数一样传入,之后他会原封不动的输出。

 

假如说我们要使用.length的话,在函数内部使用是会报错的,因为我们没有定义参数的类型。


typescript 泛型generics

就算我们使用前面所说的泛型也是没用的,因为这里我们要引入一个新的概念,叫做泛型的约束,顾名思义,就是将泛型的类型进行约束。因为我们的泛型是可以传入任意类型的,而我们如果想要在函数内使用特定的属性方法的话,就要将类型给他约束一下。

我们先简单看一下泛型怎么设置传入数据的类型。

我们将T设置为数组,其实也就是将T后面加上[],这样就是数组了。


typescript 泛型generics

但是虽然这么看已经有了好转,但实际上这个方法并没有什么卵用。

因为除了数组以外还有别的类型也有length属性,但是我们这样设置的话,只能传入数组。

接下来步入正题,通过上面的例子,我们就能很清楚的知道固定类型的麻烦之处了,如何解决呢?

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


typescript 泛型generics

这里我们先上代码给大家看一下吧,首先是定义了一个接口,然后通过extends来让T继承IWithLength,这样我们就可以传入可以使用length的类型了。

这其实就是duck了,只要你有这个length属性,你就符合我们的约束,那么你就是duck了,不管你实际上是什么类型。

我们如果传入一个不符合的类型,当然是会报错的。


关于泛型的介绍,第一部分就到这里了,其余的等下一篇文章进行介绍。如果有什么疑问可以在评论区留言我会在看到的第一时间进行回复的。

版权:本文由Datehoer原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接本文链接:https://zjzdmc.top/jsfx/130.html。

文章推荐

热门标签

返回顶部
下面为相关推荐
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!