• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

深入浅出TypeScript(3)- 函数重载和泛型

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

面向对象特性中,最根本的就是面向对象的三大基本特征:封装、继承、多态。同时,TypeScript中也存在多态的使用,比如函数重载,今天我们先看一下函数重载以及泛型的概念。

什么是函数重载

简单来说,函数重载具有两个特征:名称相同,参数不同(参数类型、个数不同。)所以,函数重载的解释应该是具备不同参数的同名函数。注意:函数重载是多态的一种体现

函数重载的声明和实现

TypeScript中,函数重载主要包括两部分:函数声明,和函数实现。函数声明主要是TSC解析的一种声明体现,实际编译中,并不会编译成具体代码。我们可以通过TypeScript的playground来查看。

1、参数不同的函数重载

加入我们有一个打印函数,可以打印输入的一个string信息,我们可以将函数声明如下:

// 函数声明
function print(info: string): void;

  

而还有另一种情况,就是输入的有可能是两个string类型的参数,我们都需要打印下来,于是我们的函数声明可以是这样:

// 函数声明
function print(info: string, message: string): void;

  

而当这两种声明,同时存在TypeScript的声明文件中,我们就需要用函数重载来实现,这是JavaScript没有的特性。

而实现函数重载的要求就是,我们要在一个更为宽泛的范围去实现函数重载,所以,TypeScript中的我们实现print函数如下:

// 在更宽泛的范围,我们用可选参数来实现重载
function print(info: string, message ?: string) {
    let printValue: string = info;
    if(message){
        printValue += message;
    }
    console.log(printValue);
}

  

2、参数个数相同,但类型不同的函数重载

函数重载的第二种情况,参数个数相同,但是参数类型不一样,这种情况下也可以通过重载来实现。

比如,上述打印信息的函数,有可能接受的输入是一个string字符串,也有可能输入接受的是一个number类型的数字,那么我们第一步的函数声明便是如下:

function print(info: string): void;
function print(num: number): void;

  

从上可以看到,我们的函数声明中,参数的类型是不同的,在这种情况下,TypeScript是如何在一个宽泛的范围内实现呢?这里就要用到联合类型,如下所示:

function print(message: string | number) {
    console.log(message)
}

  

函数重载的总结

从我们实现两个函数重载的例子可以看出,我们在TypeScript中实现函数重载的方式分别是利用了TypeScript中的两个类型特性:可选类型以及联合类型。

所以,如果从便捷的角度来讲,我们如果是遇到了类似的实现,其实可以直接使用可选参数和联合类型来实现自己想要的函数效果。

泛型

在函数重载的不同参数类型,相同参数个数的重载中,我们介绍了它的重载实现方式,利用联合类型来实现,但是如果要打印出来的类型有很多,那么我们最终只能用any类型来实现print函数了。

但是,如果用any类型实现一个可以打印任意值的print函数,这样又让我们的函数变得类型缺失,这个时候,泛型这种解决方案也就应运而生。

什么是泛型

泛型指的是一种情况:定义是可以是任意类型,但是在编译的时候,必须有明确的类型。

有点绕,那么我们用泛型来实现上述第二个函数重载的例子,结合这个例子,可以体会一下这句话的含义。

function print<T>(message: T) {
     console.log(message);
}

  

在这个函数中,泛型表示的方式是:函数名称<泛型参数>(arg: 泛型参数)。

这个函数在声明之后,函数类型是一个泛型。我们可以传递任意的类型参数到print函数中,但是当我们传递一个string类型的时候,这个函数便是一个string类型的函数了,已经在tsc编译阶段开始明确指定类型,这是和any函数所不一样的地方。

泛型的好处

首先,我们不用定义过多的联合类型来让函数变得复杂而又冗长,如:

function print(arg: string | number | boolean | array | 自定义类型) {
    // 我们应该尽量避免多类型的传值函数,此时我们应该用泛型来实现。
}

  

其次,泛型可以是任何类型,但是在编译时一定是类型确定的。而且泛型也可以有继承属性,可以继承接口获取更多的类型定义等。

function print<T extends Interface> (arg: T) {
    // 通过继承,来让泛型有更多的可变性。
}

  

最后,类型别名也可以是泛型,如我们可以做如下类型定义:

type Person<T> = { age: T } 

  

泛型总结

总体来说,利用泛型,也是为了更准确的让我们使用类型思维,是为了更准确的描述参数、或者声明的类型准确性,如果能够熟练的掌握泛型,那么在TypeScript的开发中,将会有不一样的体验。

而常常以类型思维去思考JavaScript中的函数或者变量,我们也就会减少很多因为类型方面的犯错,使得我们的项目不仅更好的测试,也会更少的出错。

不得不说,在大前端领域,类型思维的缺失的确是个普遍现象,如果将类型思维捡起来,将会是一个可能存在着痛苦的过程,但是我相信,如果你做到了,那么你不仅会在开发代码的时候会更谨慎,能开发出更优秀的应用程序,还会体验到前端行业别样的魅力。

我的博客地址:http://www.gaoyunjiao.fun/?p=130


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript进阶开发——ThreeJs基础实例,从入坑到入门发布时间:2022-07-18
下一篇:
TypeScript语法基础发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap