TypeScript中的方法重载详解


Posted in Javascript onApril 12, 2019

前言

方法重载(overload)在传统的静态类型语言中是很常见的。JavaScript 作为动态语言, 是没有重载这一说的。一是它的参数没有类型的区分,二是对参数个数也没有检查。虽然语言层面无法自动进行重载,但借助其动态的特性,我们可以在代码中手动检查入参的类型,或者通过 arguments 获取到参数个数,从而实现根据不同的入参做不同的操作。

比如有一个获取聊天消息的方法,根据传入的参数从数组中查找数据。如果入参为数字,则认为是 id,然后从数据源中找对应 id 的数据并返回,否则当成类型,返回这一类型的消息。

function getMessage(query) {
 if (typeof query === "nunber") {
 return data.find(message => message.id === query);
 } else {
 return data.filter(message => message.type === query);
 }
}

TypeScript 中,假如我们的消息数据为如下结构:

type MessageType = "string" | "image" | "audio";

type Message = {
 id: number;
 type: MessageType;
 content: string;
};

上面获取数据的方法等价于:

function getMessage(
 query: number | MessageType
): Message[] | Message | undefined {
 if (typeof query === "number") {
 return data.find(message => message.id === query);
 } else {
 return data.filter(message => message.type === query);
 }
}

这样做一是类型书写上比较丑陋,二是没有发挥出 TypeScript 类型检查的优势,这里我们是可以根据入参的类型明确知道返回的类型的,即如果传入的是 id,返回的是单个数据或undefined,如果是根据类型查找,返回的是数组。而现在调用方法后,得到的类型太过宽泛,这和使用 any 做为返回没多大差别。

TypeScript中的方法重载详解

函数返回类型不够紧凑

因为类型的不明朗,返回的结果都不能直接操作,需要进行类型转换后才能继续。

const result1 = getMessage("audio");
/** 不能直接对 result1 调用数组方法 */
console.log((result1 as Message[]).length);

const result2 = getMessage(1);
if (result2) {
 /** 不能对 result2 直接访问消息对象中的属性 */
 console.log((result2 as Message).content);
}

重载的实现

这时候可通过提供多个函数类型的声明来解决上面的问题,最后得到的结果就是间接实现了函数的重载。当然这个重载只是 TypeScript 编译时的。

function getMessage(id: number): Message | undefined;
function getMessage(type: MessageType): Message[];
function getMessage(query: any): any {
 if (typeof query === "number") {
  return data.find(message => message.id === query);
 } else {
  return data.filter(message => message.type === query);
 }
}

这样改造后,我们在调用的时候直接就会有重载的提示。

TypeScript中的方法重载详解

实现 TypeScript 的重载后调用时的自动提示

并且得到的结果类型是重载方法中指定的入参与返回的组合,在对结果进行使用时,无须再进行类型转换。

const result1 = getMessage("audio");
/** ✅ 无须类型转换 */
console.log(result1.length);

const result2 = getMessage(1);
if (result2) {
 /** ✅ 无须类型转换 */
 console.log(result2.content);
}

这里需要理解的是,上面添加的函数类型仅作为 TypeScript 在编译时使用的,它不是真的实现像传统静态类型语言那样的重载,也不会改变编译后代码的输出。实际运行时仍然是不带重载的 JavaScript 版本。

编译后的代码

但这一点也不影响我们在 TypeScript 中使用这种假的重载。

可选参数

另一个 TypeScript 重载的场景。还是上面获取消息数据的方法,因为根据类型查找消息时,会返回同类型消息的一个数组。此时我们想加一个参数实现只返回结果中前几个数据,那么可以很方便地进行如下的改造:

function getMessage(id: number): Message | undefined;
+function getMessage(type: MessageType, count?: number): Message[];
+function getMessage(query: any, count = 10): any {
 if (typeof query === "number") {
  return data.find(message => message.id === query);
 } else {
+  return data.filter(message => message.type === query).splice(0, count);
 }
}

通过重载,这个新增的参数很容易实现只针对入参 MessageType 时,这样如果我们有如下的调用,会得到编译时的报错:

/** ? Argument of type '1' is not assignable to parameter of type 'MessageType' */
getMessage(1,10);

而非重载的版本是享受不到上面提到的类型优势的。

function getMessage(
 query: number | MessageType,
 count = 10
): Message[] | Message | undefined {
 if (typeof query === "number") {
  return data.find(message => message.id === query);
 } else {
  return data.filter(message => message.type === query).splice(0, count);
 }
}

/** ✅ ojbk, 不错报 */
getMessage(1, 10);

重载过程

TypeScript 重载的过程是,拿传入的参数和重载的方法签名列表中由上往下逐个匹配,直到找到一个完全匹配的函数签名,否则报错。所以推荐的做法是将签名更加具体的重载放上面,不那么具体的放后面。

/** ✅*/
function getMessage(type: MessageType, count?: number): Message[];
function getMessage(id: number): Message | undefined;

/** ?*/
function getMessage(id: number): Message | undefined;
function getMessage(type: MessageType, count?: number): Message[];

像上面示例中正确做法这样,如果说入参个数只有一个,那可以直接跳过第一个函数签名,无须做入参类型的判断。

相关资源

  • TypeScript Handbook - Functions - Overloads
  • Typescript method overloading

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
Vue的Options用法说明
Aug 14 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 #Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 #Javascript
详解Bootstrap 学习(一)入门
Apr 12 #Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 #Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 #Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 #Javascript
JS实现li标签的删除
Apr 12 #Javascript
You might like
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
原生js轮播特效
2017/05/18 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python中 * 的用法详解
2019/07/10 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Python数据正态性检验实现过程
2020/04/18 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
Internet体系结构
2014/12/21 面试题
Java基础面试题
2012/11/02 面试题
师范生自我鉴定范文
2013/10/05 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
简短证婚人证婚词
2014/01/09 职场文书
公司募捐倡议书
2014/05/14 职场文书
商场收银员岗位职责
2015/04/07 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python