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脚本
Aug 04 Javascript
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
小程序红包雨的实现示例
Feb 19 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 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中iconv函数使用方法
2008/05/24 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
python 输出一个两行字符的变量
2009/02/05 Python
Python实现的tab文件操作类分享
2014/11/20 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
人事专员工作职责
2014/02/22 职场文书
幼儿评语大全
2014/04/30 职场文书
个性车贴标语
2014/06/24 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS