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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
深入探讨前端框架react
Dec 09 Javascript
javascript求日期差的方法
Mar 02 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
JS实现电商商品展示放大镜特效
Jan 07 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
php 操作符与控制结构
2012/03/07 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
php数组去重复数据示例
2014/02/25 PHP
详解PHP中的PDO类
2015/07/06 PHP
asp 的 分词实现代码
2007/05/24 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
详解Python3中字符串中的数字提取方法
2017/01/14 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
学校门卫管理制度
2014/01/30 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
励志演讲稿范文
2014/04/29 职场文书
高三励志标语
2014/06/05 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
答谢词范文
2015/01/05 职场文书
以权谋私检举信范文
2015/03/02 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL