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之大字符串的连接的StringBuffer 类
May 08 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
小程序实现列表展开收起效果
Jul 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基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
浅析vue深复制
2018/01/29 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
Python3基础之基本运算符概述
2014/08/13 Python
python爬虫实例详解
2018/06/19 Python
python 处理string到hex脚本的方法
2018/10/26 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
顶岗实习接收函
2014/01/09 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
Go并发4种方法简明讲解
2022/04/06 Golang
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL