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显示选择目录对话框的代码
Nov 10 Javascript
JS解析XML的实现代码
Nov 12 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
javascript事件模型介绍
May 31 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 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 Mysql日期和时间函数集合
2007/11/16 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python中的二维列表实例详解
2018/06/19 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
python对日志进行处理的实例代码
2018/10/06 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
《雨霖铃》教学反思
2014/02/22 职场文书
2014年减负工作总结
2014/12/10 职场文书
预备党员介绍人意见
2015/06/01 职场文书
退货证明模板
2015/06/23 职场文书
工商行政处罚决定书
2015/06/24 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书