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 相关文章推荐
Javascript 面向对象特性
Dec 28 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 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下保存远程图片到本地的办法
2010/08/08 PHP
php实现cookie加密的方法
2015/03/10 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
javascript 写类方式之一
2009/07/05 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
python 实现aes256加密
2020/11/27 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
建筑工程专业大学生求职信
2014/04/23 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
大学生党性分析材料
2014/12/19 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL