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之锁定表格栏位
Jun 29 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
URL中“#” “?” &“”号的作用浅析
Feb 04 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
JavaScript执行机制详细介绍
Dec 06 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
加速XP搜索功能堪比vista
2007/03/22 PHP
劣质的PHP代码简化
2010/02/08 PHP
php 地区分类排序算法
2013/07/01 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
jquery中.add()的使用分析
2013/04/26 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
跟老齐学Python之用while来循环
2014/10/02 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
电子商务专业学生的自我鉴定
2013/11/28 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
商铺租赁意向书
2014/04/01 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
班主任自我评价范文
2015/03/11 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
《称赞》教学反思
2016/02/17 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
python中filter,map,reduce的作用
2022/06/10 Python
go goth封装第三方认证库示例详解
2022/08/14 Golang