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中的逻辑判断符&&、||与!介绍
Dec 31 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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学习之PHP变量
2006/10/09 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
jQuery链使用指南
2015/01/20 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
python实现从字典中删除元素的方法
2015/05/04 Python
深入解析Python中的urllib2模块
2015/11/13 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python实现数字的格式化输出
2020/08/01 Python
python如何操作mysql
2020/08/17 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
商务助理岗位职责
2013/11/13 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
钳工实训报告总结
2014/11/04 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python