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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
JS中的phototype详解
Feb 04 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
Postman动态获取返回值过程详解
Jun 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
改进的IP计数器
2006/10/09 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
python实现图片九宫格分割
2021/03/07 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
高二生物教学反思
2014/01/27 职场文书
优秀护士获奖感言
2014/02/20 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
暂停营业通知
2015/04/25 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
首都博物馆观后感
2015/06/05 职场文书