TypeScript实用技巧 Nominal Typing名义类型详解


Posted in Javascript onSeptember 23, 2022

Nominal Typing(名义类型)

概念解析

意思是给一个类型附加上一个“名义”,从而防止结构类型在某些情况下由于类型结构相似而被错用。假设有如下代码:

interface Vector2D { x: number, y: number };
interface Vector3D { x: number, y: number, z: number };
function calc(vector: Vector2D): void;

const vector: Vector3D = { x: 1, y: 1, z: 1}

calc(vector) // 并没有抛出错误

看上去calc()函数应该只能传入Vector2D类型,但其实也可以传入Vector3D,因为本质上Vector3DVector2D的子集。对于calc()函数来说,传入的vector变量的类型中只要同时具有xy属性即可通过类型校验。

这种特性这在TS中被称为 Structual Typing(结构类型)。通常来说这会给我们的编码过程带来便利,但极端情况下,也可能不符合我们的预期。

假如严格规定函数只能传入Vector2D类型而不能传入Vector3D类型,那么在类型实现上,就可以使用 名义上的类型(Nominal Type),通过为原类型添加一个独有标识来区分彼此:

interface Vector2D { x: number, y: number, __type: '2d' };
interface Vector3D { x: number, y: number, z: number, __type: '3d' };
function calc(vector: Vector2D): void;

对于interface,我们可以直接为其增加标志属性,但 primitive types (原始类型) 要如何处理呢?答案是使用交叉类型,例如:

type Food = string & { _type: 'food' };
type Money = number & { _type: 'money' }

你可能会对最终类型有所疑问,但这样处理之后,他们依旧是原始类型。因为实际上原始类型最终都会解析成对应的 WrapperType (包裹类型),例如string → Stringnumber → Number,就像在JS中一样。这意味着你可把它们当做原始类型使用:

const money = 100 as Money;
const bill = money * 1; // bill 仍然是 number 类型

虽然这样的使用方式显得不太优雅,甚至有些繁琐,但在某些情况下至少可以保证类型安全。假如你的类型系统中有许多 基础类型单元,那可能会非常有用。

拓展应用

这样的类型虽然可以被当做原始类型使用,但本质上又不是纯粹的原始类型。我们可以利用这个特性,写出一些非常有趣和实用的类型

例如在字面量枚举时,我们可以在限制预设值的同时,使用 基于原始类型拓展出来的名义类型 进行兜底,从而使得我们的类型能够在具备足够自由性的前提下,仍能享受到TypeScript的类型提示,如下:

TypeScript实用技巧 Nominal Typing名义类型详解

可以看到,CustomLiteral名义类型不但可以享受到Literal字面量的类型提示,又能跳出枚举的限制,使用自定义字符串。倘若我们将Literal和原始类型string直接交叉:

TypeScript实用技巧 Nominal Typing名义类型详解

联合类型的机制本质上是求并集,而求并集最终得到的类型将会是更加广泛而通用的string,这使得我们反而使失去了字面量类型的推导。想要实现上述效果,就需要为string类型赋予“名义”,使它不同于普通的原始类型,不再那么“广泛”,从而在求并集的时候,不至于被string类型彻底拿捏。附上Typescript Playground

在Vue中的应用

其实在Vue3源码中也有很多 Nominal Typing 的例子,例如VNodeTeleportKeepAliveFragment等等这些内置组件,他们的定义中都有一个标志变量用于区分。分别对应了__is_VNode__isTeleport__isKeepAlive__isFragment。下图是KeepAlive组件的声明,更多组件声明可以移步官方仓库查阅。

TypeScript实用技巧 Nominal Typing名义类型详解

如果类型声明的位置处在函数入参上,为了防止与用户定义的属性产生冲突,通常会采用unique symbol作为键值来构造名义类型,例如:

TypeScript实用技巧 Nominal Typing名义类型详解

以上就是TypeScript实用技巧 Nominal Typing名义类型详解的详细内容,更多关于TypeScript名义类型Nominal Typing的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
Moment的feature导致线上bug解决分析
Sep 23 #Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 #Javascript
js 实现验证码输入框示例详解
Sep 23 #Javascript
TypeScript 内置高级类型编程示例
Sep 23 #Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 #Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 #Javascript
TS 类型兼容教程示例详解
Sep 23 #Javascript
You might like
PHP新手上路(十三)
2006/10/09 PHP
PHP 翻页 实例代码
2009/08/07 PHP
给ECShop添加最新评论
2015/01/07 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
初中政治教学反思
2014/01/17 职场文书
自我推荐信格式模板
2015/03/24 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
合同审查法律意见书
2015/06/04 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
P站美图推荐——变身女主角特辑
2022/03/20 日漫