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函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 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
PHP静态新闻列表自动生成代码
2007/06/14 PHP
php getsiteurl()函数
2009/09/05 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
Python时间获取及转换知识汇总
2017/01/11 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
Ajax请求总共有多少种Callback
2016/07/17 面试题
出生证明公证书
2014/04/09 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS