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 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 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+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
《孔子游春》教学反思
2014/02/25 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
开业庆典主持词
2014/03/21 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
南湾猴岛导游词
2015/02/09 职场文书
2015年端午节活动总结
2015/02/11 职场文书
学习保证书怎么写
2015/02/26 职场文书
幼儿园六一主持词
2015/06/30 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL