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学习笔记4 Eval函数
Jan 11 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
初识Node.js
Mar 20 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 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引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP中串行化用法示例
2016/11/16 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
javascript获取当前ip的代码
2009/05/10 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
python从入门到精通(DAY 3)
2015/12/20 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
python游戏开发的五个案例分享
2020/03/09 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
节约电力资源的建议书
2014/03/12 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
2015年招聘工作总结
2014/12/12 职场文书
表扬通报怎么写
2015/01/16 职场文书
惊天动地观后感
2015/06/10 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
JS数组去重详情
2021/11/07 Javascript
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫