TypeScript 运行时类型检查补充工具


Posted in Javascript onSeptember 28, 2020

TypeScript是静态类型系统,在编译时做类型检查。一般而言,如果项目所用到的所有库、模块都是基于ts的,那么静态类型已经可以避免大部分编程层面的类型问题。不过,在一些场景下来,单纯静态类型是无法解决问题的,部分数据是动态传入到系统中的,主要包含场景如下:

  • 第三方数据源(接口API、本地持久化存储、postMessage等)
  • 第三方调用者传参
  • 全局状态变更

当然,还有其他可能,总之,单纯靠静态类型检查,无法解决运行时类型问题。因此,我写了tyshemo这个工具。它可以帮助我们完成运行时的类型检查。它暴露了很多接口,其中的Ty接口,很适合在js中作为ts的补充被使用,我们来看下。

import { Ty } from 'tyshemo'

@Ty.decorate.with([Number, Number])
class Some {
 constructor(a, b) {
  this.x = a + b
 }
 
 @Ty.decorate.with(String)
 name = 'calc'
 
 @Ty.decorate.with([Number], Number)
 plus(y) {
  return this.x + y
 }
}

const some = new Some(1, 3) // ok
const some2 = new Some('1', '3') // throw error

some.name = 'ooo' // ok
some.name = 123 // throw error

const z = some.plus(2) // ok
const z1 = some.plus('3') // throw error

我们可以通过 Ty.decorate.with() 作为装饰器来限定一个类上属性的值类型,方法的参数和返回值类型。

在正常的程序中,我们有的时候也需要对值进行限定,但是由于js语言的特性,我们无法对基础类型的值进行监听,不过我们可以对object进行监听。我们可以如下操作:

const o = process.env.NODE_ENV === 'production' ? {} : Ty.decorate({}).with({
 name: String,
 age: Number,
})

o.name = null // throw error
o.name = 'aaa' // ok

o.age = '12' // throw error
o.age = 12 // ok

通过 process.env.NODE_ENV === 'production' 来控制当前环境,如果在正式环境,就不需要这个能力,毕竟我们在测试环境已经做过充分验证了。

要对来自API的数据进行检查,我们可以这样操作。

function getData(url) {
 return fetch(url).then(res => res()).then((data) => {
  if (process.env.NODE_ENV !== 'production') {
   Ty.expect(data).to.be({
    name: String,
    age: Number,
   })
  }
  return data
 })
}

Ty 这个接口可以快速对数据进行结构化检查。tyshemo还有很多其他方面的能力,可以在它的文档中了解更多。

到此这篇关于TypeScript 运行时类型检查补充工具的文章就介绍到这了,更多相关TypeScript 运行时类型检查内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
基于openlayers实现角度测量功能
Sep 28 #Javascript
OpenLayer学习之自定义测量控件
Sep 28 #Javascript
Vue中父子组件的值传递与方法传递
Sep 28 #Javascript
JSONObject与JSONArray使用方法解析
Sep 28 #Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 #Javascript
Openlayers实现距离面积测量
Sep 28 #Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 #Javascript
You might like
在线增减.htpasswd内的用户
2006/10/09 PHP
将数组写入txt文件 var_export
2009/04/21 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
python读取Kafka实例
2019/12/23 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
查看keras的默认backend实现方式
2020/06/19 Python
详解python 内存优化
2020/08/17 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
软件测试常见笔试题
2012/02/04 面试题
医学毕业生自我鉴定
2013/10/30 职场文书
后备干部考察材料
2014/02/12 职场文书
开会通知短信大全
2015/04/20 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书