TypeScript 运行时类型检查补充工具

 更新时间:2020年09月28日 09:55:07   作者:否子戈  
这篇文章主要介绍了TypeScript 运行时类型检查补充工具,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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 运行时类型检查内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Bootstrap每天必学之表格

    Bootstrap每天必学之表格

    Bootstrap每天必学之表格,向大家分享了几种最为常用的各种列表展示,希望大家喜欢。
    2015-11-11
  • Javascript string 扩展库代码

    Javascript string 扩展库代码

    Javascript原生的String处理函数显得很不够丰富
    2010-04-04
  • js中的异常处理try...catch使用介绍

    js中的异常处理try...catch使用介绍

    在JavaScript可以使用try...catch来进行异常处理,下面有个不错的示例,大家可以参考下,希望对大家有所帮助
    2013-09-09
  • 微信小程序开发之实现食堂点餐系统

    微信小程序开发之实现食堂点餐系统

    这篇文章主要为大家详细介绍了如何通过微信小程序开发一个简单的食堂点餐系统,文中的示例代码讲解详细,感兴趣的小伙伴可以和小编一起学习一下
    2023-01-01
  • JS面试必备之如何实现一个精确的倒计时

    JS面试必备之如何实现一个精确的倒计时

    又到了金三银四的季节了,面试的各位同学要开始准备起来了,今天主要分享一个在面试中经常被提到的一个面试题:倒计时,希望对大家有所帮助
    2024-03-03
  • JS实现轮播图小案例

    JS实现轮播图小案例

    这篇文章主要为大家详细介绍了JS实现轮播图小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • JS模拟键盘打字效果的方法

    JS模拟键盘打字效果的方法

    这篇文章主要介绍了JS模拟键盘打字效果的方法,涉及javascript鼠标事件及字符串操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 微信小程序实现下拉刷新和轮播图效果

    微信小程序实现下拉刷新和轮播图效果

    这篇文章主要为大家详细介绍了微信小程序实现下拉刷新和轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 在多个页面使用同一个HTML片段的代码

    在多个页面使用同一个HTML片段的代码

    有一个比较复杂的HTML片段(A),如果把这个HTML片段嵌入到其他页面中(B,C,D....)。 问题的关键是在HTML片段中有大量的JavaScript逻辑需要处理,比如说分页,点击事件响应等。
    2011-03-03
  • 详解JavaScript中的六种错误类型

    详解JavaScript中的六种错误类型

    本文给大家详细介绍了JavaScript中的六种错误类型,需要的朋友可以参考下
    2017-09-09

最新评论