TypeScript 使用 Tuple Union 声明函数重载
问题:
TypeScript 中为函数添加多个签名后,依然需要添加相应的代码来判断并从不同的签名参数列表中获取对应的参数。过去常见的写法:
function refEventEmitter(event?: string): void; function refEventEmitter(event: string, callback: () => void): void; function refEventEmitter(callback: () => void): void; function refEventEmitter( eventOrCallback?: string | (() => void), callback?: () => void, ): void { let event: string | undefined; if (typeof eventOrCallback === 'function') { callback = eventOrCallback; } else { event = eventOrCallback; } // ... }
这个过程因为将原有参数列表直接按序号拍平,参数之间的类型关联需要人肉确保正确。
技巧:
这时我们可以通过使用tuple union
的参数类型,来无脑处理各种函数重载情况:
function refEventEmitter(event?: string): void; function refEventEmitter(event: string, callback: () => void): void; function refEventEmitter(callback: () => void): void; function refEventEmitter( ...args: | [event?: string] | [ event: string, callback: () => unknown, ] | [callback: () => unknown] ): void { let [event, callback] = args.length === 2 ? args : typeof args[0] === 'function' ? [undefined, args[0]] : [args[0], undefined]; // ... }
实际上,此时上方的签名列表也不再需要了:
function refEventEmitter( ...args: | [event?: string] | [ event: string, callback: () => unknown, ] | [callback: () => unknown] ): void { let [event, callback] = args.length === 2 ? args : typeof args[0] === 'function' ? [undefined, args[0]] : [args[0], undefined]; // ... }
这篇其实拖了有点久,在写的时候发现 TypeScript 已经内置了 "Convert overload list to single signature" 的重构选项,可以一键将重载列表变为参数 tuple union。
不过到这里其实还存在问题,TypeScript 中 typeof 条件判断不能对整个对象进行收窄,只能收窄被 typeof 到的某个元素、属性。上面的例子中,如果需要的不只是 args[0]
就会出现问题。
此时我们可以引入一个工具函数 isTypeOfProperty(object, key, type):
此时实现就变成了:
function refEventEmitter( ...args: | [event?: string] | [ event: string, callback: () => unknown, ] | [callback: () => unknown] ): void { let [event, callback] = args.length === 2 ? args : isTypeOfProperty(args, 0, 'function') ? [undefined, args[0]] : [args[0], undefined]; // ... }
到此这篇关于TypeScript 使用 Tuple Union 声明函数重载的文章就介绍到这了,更多相关TypeScript 声明函数重载内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://zhuanlan.zhihu.com/p/492985966
相关文章
- 本文主要对C# 类的声明进行详细介绍。具有一定的参考价值,下面跟着小编一起来看下吧...2020-06-25
- 这篇文章主要给大家分享的是TypeScript 索引签名的理解,索引签名由方括号中的索引名称及其类型组成,后面是冒号和值类型:{ [indexName: KeyType]: ValueType }, KeyType 可以是一个 string、number 或 symbol,而ValueType 可以是任何类型,下面就俩简单了解一下吧...2021-10-15
- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
- 只要是写过点JS代码,很简单一个var 就完事了。那对于JS编译器背后它又发生了什么呢?那就一步步通过代码来讲起。 复制代码 代码如下: x = 1; alert(x); var y = function() { alert(x); var x = 2; alert(x); } y();...2013-10-13
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-22- 这篇文章主要介绍了使用TS来编写express服务器的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别
我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20- 这篇文章主要介绍了TypeScript魔法堂之枚举的超实用手册,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-29
- 这篇文章主要介绍了你不知道的 TypeScript 高级类型(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-29
- 与如何在React项目中应用TypeScript类类似在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator,需要的小伙伴可续看下文具体介绍...2021-09-15
- 这篇文章主要给大家介绍了关于TypeScript中条件类型精读与实践的相关资料,,条件类型就是在初始状态并不直接确定具体类型,而是通过一定的类型运算得到最终的变量类型,需要的朋友可以参考下...2021-10-05
- 这篇文章主要介绍了CocosCreator入门教程之用TS制作第一个游戏,对TypeScript感兴趣的同学,一定要看一下...2021-04-16
- 本文主要介绍了webpack搭建脚手架打包TypeScript代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-21
- 这篇文章主要为大家介绍了TypeScript前端上传文件到MinIO示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2022-10-12
- 这篇文章主要介绍了C语言 联合(union)用法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-08-26
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
TypeScript中正确使用interface和type的方法实例
在ts中定义类型由两种方式:接口(interface)和类型别名(type alias),interface只能定义对象类型,下面这篇文章主要给大家介绍了关于TypeScript中正确使用interface和type的相关资料,需要的朋友可以参考下...2021-09-15- 这篇文章主要介绍了C#虚方法的声明和使用实例教程,对于初学者理解C#的虚方法有一定的帮助,需要的朋友可以参考下...2020-06-25
Queryable.Union 方法实现json格式的字符串合并的具体实例
这篇文章介绍了Queryable.Union 方法实现json格式的字符串合并的具体实例,有需要的朋友可以参考一下...2021-09-22- 这篇文章主要介绍了PHP类的声明与实例化及构造方法与析构方法,结合实例形式分析了PHP面向对象类的声明与使用相关技巧,需要的朋友可以参考下...2016-01-28