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 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
JavaScript类库D
Oct 24 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
Vue Render函数原理及代码实例解析
Jul 30 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
javascript 面向对象继承
2009/11/26 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
应聘教师推荐信
2013/10/31 职场文书
美术课外活动总结
2014/07/08 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
专家推荐信怎么写
2015/03/25 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
装修公司管理制度
2015/08/05 职场文书
PHP使用QR Code生成二维码实例
2021/07/07 PHP
python使用BeautifulSoup 解析HTML
2022/04/24 Python